クラスの名前を指定せずに同じクラスの要素をターゲットにする方法

Question

jQueryを初めて使用しています。質問があまりにも基本的である場合は、私を許してください。

私は同じクラスの2つ以上の要素をターゲットにする方法を知っています私はクラスの名前を知っています。私の問題は、私が構築しているウェブサイトの多くのクラスの名前が動的に作成されることです。だから、私はクラスの具体的な名前について多くの制御を持っていない。

は、私は何をしようとしていることは、彼らが同じクラスを持っているとき、私はクラスの名前がわからない場合でも、2つの要素を標的とすることです。

例：

<a href="#" class="title25">Some text</a> 
<figcaption class="title25">Some text</figcaption> 

ので、これらの要素は、（それが何であれ）同じクラスを持って、彼らが何かを行うが、私のjQueryので.title25のようなものを設けることなくしていない何かを、行います。

Answer 1

このような何か：

$("a").each(function(index, element) { 
    var class = $(element).attr("class"); 
    if(class.length > 2) { 
     // do something 
    } 
}); 

テストされていない。..

Answer 2

スタートすべてa要素とそれらのそれぞれのために取得することで、あなたは同じクラスでfigcaption

$("a").each(function() { 
    // Here, 'this' is the current a element in the loop 
    var currentClass = $(this).attr("class"); 
    // Search for a figcaption element with the same class 
    var correspondingFigcaption = $('figcaption.' + currentClass); 
    if(correspondingFigcaption.length > 0){ 
     // Here, 'this' is your a element 
     // and correspondingFigcaption.get(0) is the first corresponding figcaption 
    } 
}); 

を探しますもちろん、あなたはただ一つのfigcaption対応要素を取得していることを確認することができますが、私はあなたに完全に利用させます。

Answer 3

プレーンのJavaScript：

• がマージされたアレイを通って上concat()
• 反復の両方の配列をマージArray.prototype.slice.call()
• て配列する各ノード・リストに変換querySelectorAll()
• とアンカーと字幕の2 NodeListsを集めます各反復は、要素のを見つけるclassName
• 次にunshift（またはpush）新しい配列にclassName
• は、アレイ格納の長さを通ってfindTwin()
• findTwin()
  • ループ機能を介して次の要素と比較するオブジェクトの各要素を新しい配列を渡します。
  • マッチとシングルは、ダブルの配列とユニークの配列に分かれています。
  • 倍精度の配列が返され、必要に応じて単列の配列を変更することができます。
  • スニペットには一連のアンカーとキャプションがあります。 2つのダブルス：title25とtitle00があります。

スニペット

var ancs = document.querySelectorAll('a'); 
 
var caps = document.querySelectorAll('figcaption'); 
 

 
var aArray = Array.prototype.slice.call(ancs); 
 
var cArray = Array.prototype.slice.call(caps); 
 

 
var mergedArray = aArray.concat(cArray); 
 
var total = mergedArray.length; 
 

 
var classArray =[]; 
 

 
for (var i = 0; i < total; i++) { 
 
    var aClass = mergedArray[i].className; 
 
    classArray.unshift(aClass); 
 
} 
 

 

 
var twins = findTwin(classArray); 
 

 
console.log('matched: ' + twins); 
 

 
function findTwin(arr) { 
 
    var singleArray = []; 
 
    var doubleArray = []; 
 
    var total = arr.length; 
 
    var sorted = {}; 
 

 
    while (total--) { 
 
    var item = arr[total]; 
 

 
    if (!sorted[item]) { 
 
     singleArray.unshift(item); 
 
     sorted[item] = true; 
 
    } else { 
 
     doubleArray.unshift(item); 
 
     sorted[item] = true; 
 
    } 
 
    } 
 
    return doubleArray; 
 
}

<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script> 
 
<a href="#" class="title00">Some text</a> 
 
<figcaption class="title05">Some text</figcaption> 
 
<a href="#" class="title55">Some text</a> 
 
<figcaption class="title27">Some text</figcaption> 
 
<a href="#" class="title28">Some text</a> 
 
<figcaption class="title85">Some text</figcaption> 
 
<a href="#" class="title25">Some text</a> 
 
<figcaption class="title25">Some text</figcaption> 
 
<a href="#" class="title35">Some text</a> 
 
<figcaption class="title00">Some text</figcaption> 
 
<a href="#" class="title45">Some text</a> 
 
<figcaption class="title26">Some text</figcaption>

Answer 4

これは、多くの方法を達成することができます。私はそのようにして、ページ内で使われているすべての種類のクラスを尋ねます。ループ内でそれらを使って要素にアクセスするのは簡単でした。そしてそれは本当にあなたがそれらと何をしたいのかに主観的です。

私のコードが行く：ここ

<a href="#" class="title25">Some text1</a> 
<figcaption class="title25">Some text2</figcaption> 
<div class="title30">Some text3</div> 
<span class="title30">Some text4</span> 
<p class="title50">Some text5</p> 
<ul class="title50"> 
    <li>Some text6</li> 
</ul> 

例はjQueryを使って示されています。また、生のJavaScriptやその他のフレームワークを使用することもできます。

var classes = []; 
$('[class]').each(function(){ 
    $($(this).attr('class').split(' ')).each(function() { 
     if (this.length>0 && $.inArray(this.valueOf(), classes) === -1) { 
      classes.push(this.valueOf()); 
     }  
    }); 
}); 

console.log(classes); 

classes.forEach(function(i){ 
    $('.'+i+':first').attr("style", "color: red;"); 
    $('.'+i+':last').attr("style", "color: green;"); 

    $('DIV.'+i).attr("style", "font-size: 24px;"); 
    $('p.'+i).attr("style", "font-weight: 800;"); 
    $('span.'+i).attr("style", "text-decoration: underline;"); 
}); 

JSFiddleリンク：https://jsfiddle.net/27g7aayt/1/