CSS：私は属性セレクタ

Question

内の属性の値を参照することができますより良い例を使用して私の問題を説明します。

私は

<a name="2846" href="Data.Product.html#2846" class="Function"> ... </a> 
<a name="2877" href="Data.Product.html#2846" class="Function"> ... </a> 
<a name="2911" href="Data.Product.html#2911" class="Function"> ... </a> 

のようなものが含まれているhtmlファイルを持って、私は（でを選択したいですCSSセレクタの手段）クラスの "Function"要素を持ち、href属性はname属性の正確な値で終わります。上記の例では、次の2つだけですが、私は多分、それについてのラインa.Function[href$=?]に沿って何かを考えて

<a name="2846" href="Data.Product.html#2846" class="Function"> ... </a> 
<a name="2911" href="Data.Product.html#2911" class="Function"> ... </a> 

を選択されます。私の質問は、私はセレクタのname属性の値を参照することができます、それを行う方法はありますか？

ありがとうございます！

Answer 1

ケースには2つのループが必要です。 1つはすべてのFunctionクラス要素をフェッチし、次にhref属性の属性値がnameかどうかを確認します。

これを試してみてください：

var filteredEls = Array.prototype.filter.call(// Convert NodeList to Array 
 
    document.getElementsByClassName('Function'), // Get all "Function" class elements 
 
    function(el) { 
 
    return el.getAttribute('href') === "Data.Product.html#" + el.name; // Filter elements with the condition 
 
    } 
 
); 
 

 
console.dir(filteredEls); // check console

<a name="2846" href="Data.Product.html#2846" class="Function"> ... </a> 
 
<a name="2877" href="Data.Product.html#2846" class="Function"> ... </a> 
 
<a name="2911" href="Data.Product.html#2911" class="Function"> ... </a>