jQuery/Javascript相当のCSSカウンタ？

Question

jQuery/Javascriptを使用してタグのテキストを直接変更するカウンタを実装することはできますか？たとえば、私は2個のタグがあった場合：jQueryの/ JS関数を実行した後

<a>hello</a> 
<a>bye</a> 

を、これは何が起こるかです：私はへのスクリプトを必要とするよう

<a>[1]hello</a> 
<a>[2]bye</a> 

私は、CSSカウンタを使用することはできません直接HTMLを編集します。

Answer 1

あなたはすべてのアンカーをループ.html(function)

$("a").html(function(index, html) { 
 
    return "[" + (index + 1) + "]" + html; 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
 
</script> 
 
<a>hello</a> 
 
<a>bye</a>

Answer 2

を可能性が使用して.prepend()を使用してコンテンツにインデックスを追加することができます

$("a").each(function(index,value) { 
    $(this).prepend("["+(index++)+"] "); 
}) 

は、この情報がお役に立てば幸いです。

$("a").each(function(index,value) { 
 
    $(this).prepend("["+(index++)+"] "); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
 
</script> 
 
<a>hello</a> 
 
<a>bye</a>

Answer 3

使用このコードは、純粋なJSで

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
</script> 
<a>hello</a> 
<a>bye</a> 

<script> 
$("a").html(function(index, data) { 
    return "[" + (index + 1) + "]" + data; 
}) 
</script> 

Answer 4

、あなたはテキストノードを作成して使用して取得する最初の子ノードとしてそれを挿入することができますカウンター - 以下のデモをご覧ください：

要素のそれぞれについて

Array.prototype.forEach.call(document.querySelectorAll("a"), function(e, i) { 
 
    e.insertBefore(document.createTextNode(`[${i+1}]`), e.childNodes[0]); 
 
});

<a>hello</a> 
 
<a>bye</a>