jquery - 同じインデックスを持つが別のコンテナにある要素のJquery選択

Question

これが私のhtmlです：

<div id="x">
   <ul>
       <li>a</li>
       <li>b</li>
   </ul>
   <div id="a"></div>
   <div id="b"></div>
</div>

次の変数があるとします。

var div_b = $("#b");

div_b は、x という名前の div の 2 番目の div です。div_b 変数のインデックスを使用して、ul の 2 番目の li を選択したいと考えています。jqueryを使用して適切な選択を行うにはどうすればよいですか? もちろん、選択は最初の div でも機能する必要があります。

Answer 1

http://jsfiddle.net/konan/MDk3Q/

$(document).ready(function () {


    $("#x > div").click(function() {
        // set color black 

        $('#x > ul > li').css("color", "black");  


        var idx = $("#x > div").index(this);
        var div_b = $('#x > ul > li').eq(idx);
        div_b.css("color", "red");  

    });



});

Answer 2

あなたが持っていると仮定：

var div_b = $("#b");

$("ul > li").eq($("#x > div").index(div_b));

作業例:

http://jsbin.com/iZiPabA/3/edit

だからここに

 <div id="x">
   <ul>
       <li>a</li>
       <li>bc</li>
       <li>ad</li>
       <li>be</li>
       <li>b2</li>
   </ul>
     <div id="a"></div>
     <div id="a1"></div>
     <div id="a2"></div>
     <div id="b"></div>
     <div id="a3"></div>

</div>

それは：

Answer 3

Fiddle DEMO

$('#b,#a').click(function () {
    var index = $(this).index('div');
    alert($('#x ul li:nth-child(' + index + ')').text());
});

また

Fiddle DEMO

$('#x div').click(function () {
    var index = $(this).index('div');
    alert($('#x ul li:nth-child(' + index + ')').text());
});

参考文献

:n番目の子()