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是div中名为x的第二个div。使用div_b变量的索引，我想选择ul中的第二个li。如何使用jquery进行适当的选择？当然，选择也必须与第一个div合作。

Answer 1

使用：$('#x li:eq('+ $('#x div').index( $('#b') )+')')

示例：

var div_b = $("#b");
$('#x li:eq('+ $('#x div').index( div_b )+')').css('color','red')

<强> jsFiddle example

Answer 2

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 3

假设你有：

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 4

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());
});

参考文献

:nth-child()