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 中的第二个 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 示例

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