Как использовать индекс один <li>при определении соответствующего <li> - PullRequest
Новая
       16

Как использовать индекс один <li>при определении соответствующего <li>

3 голосов
/ 28 января 2011

Я работал над этой проблемой, и я разочарован тем, что у меня нет четкого понимания того, как создать указатель и создать экземпляр указателя через jQuery.

У меня есть два списка: 

<div class="listSet">
    <ul id="list1">
        <li>One bug <a href="#">X</a></li>
        <li>Two bug <a href="#">X</a></li>
        <li>Three bug <a href="#">X</a></li>
    </ul>
</div>
</div class="listSet">  
    <ul id="list2">
        <li><img src="bug1.jpg"></li>
        <li><img src="bug2.jpg"></li>
        <li><img src="bug3.jpg"></li>
    </ul>
</div>

Я использую захват клика по первому списку, чтобы дать мне индекс этого неупорядоченного списка: 

var theBox = $(this).parents('li');
theBoxInd = $('#list ul li').index(theBox);

Как мне получить дескриптор соответствующего LI во втором списке? Я хотел удалить их с экрана, но не могу воспроизвести идею наличия индекса второго списка, чтобы иметь возможность .remove() двух LI.

Любая помощь приветствуется.

Ответы [ 2 ]

4 голосов
/ 28 января 2011

Вы можете использовать комбинацию метода add () и метода index () для достижения этого: 

$("#list1 li a").click(function(e) {
    e.preventDefault();
    var $li = $(this).parent();
    $("#list2 li:eq(" + $li.index() + ")").add($li).remove();
});

Это удалит оба li элементов с одинаковым index

Рабочий пример : http://jsfiddle.net/cttZn/5/

Или вы можете использовать селектор :nth-child следующим образом: 

$("#list1 li a").click(function() {
    var child = $(this).parent().index() + 1;
    $("#list1, #list2").find("li:nth-child(" + child + ")").remove();
});

Рабочий пример : http://jsfiddle.net/cttZn/8/

1 голос
/ 28 января 2011

Вот пример: 

$('#list1 > li > a').click(function(e) {
    e.preventDefault();
    var idx = $(this).closest('li').index();
    var corresp = $('#list2 > li').eq(idx);
    alert(corresp.children('img').attr('src'));
    // to remove the <li> element: corresp.remove();
});

http://jsfiddle.net/ThiefMaster/yM3aD/

...