35

複数の 'DIV' 要素のクラスがあり、その中に 'p' 要素のリストがあります。下記参照：

<div class="container">
    <p>This is content 1</p>
    <p>This is content 2</p>
    <p>This is content 3</p>
</div>
<div class="container">
    <p>This is content 1</p>
    <p>This is content 2</p>
    <p>This is content 3</p>
</div>

ホバーを介して「p」要素を呼び出すための私のjQueryコードは次のとおりです。

$('.container').children('p').hover(function(){
    //get the nth child of p from parent class 'container'
});

親コンテナクラス「コンテナ」から要素「p」のn番目の子番号を取得するにはどうすればよいですか?

ホバーした場合のように

コンテンツ1です

出力を 1 としてトリガーする必要があります。

4

3 に答える 3

82

そのためにjQueryのindex関数を使用できます。指定された要素がその兄弟に対して相対的な場所を示します。

var index = $(this).index();

実例| ソース

インデックスは 0 ベースなので、1 ベースのインデックスを探している場合 (たとえば、最初のインデックスが1ではなく0)、1 を追加するだけです。

var index = $(this).index() + 1;

jQuery を使用しておらず、この質問と回答 (OP が jQuery を使用していた) に出くわした場合、これを使用せずに行うのも非常に簡単です。elementsnth-childのみを考慮するため、次のようになります。

function findChildIndex(node) {
    var index = 1;                         // nth-child starts with 1 = first child
    // (You could argue that you should throw an exception here if the
    // `node` passed in is not an element [e.g., is a text node etc.]
    // or null.)
    while (node.previousSibling) {
        node = node.previousSibling;
        if (node && node.nodeType === 1) { // 1 = element
            ++index;
        }
    }
    return index;
}
于 2012-05-11T07:33:12.023 に答える
8

メソッドのパラメーターなしのバージョンを使用し.index()て、兄弟に対する要素の位置を見つけます。

$('.container').children('p').hover(function() {
     var index = $(this).index() + 1;
});

の結果は 1 から始まるのではなく 0 から始まることに注意してください.index()。したがって、+ 1

于 2012-05-11T07:33:39.403 に答える
0 
$('.container').children('p').hover(function(){
    //get the nth child of p from parent class 'container'
    var n = 1;
    var child = $(this).parent().find("p:eq("+n+")");
});

うまくいくはずです！

または、ホバーされた要素のインデックスを知りたい場合:

$('.container').children('p').each(function(index,element) {
    // use closure to retain index
    $(element).hover(function(index){
        return function() { alert(index); }
    }(index);
}

http://api.jquery.com/each/を参照してください。

于 2012-05-11T07:34:09.633 に答える