Question

除了我选择的LI之外，我想隐藏某个UL中的所有其他LI。

<ul>
  <li><div></div></li>
  <li><div></div></li>
</ul>
<ul>
  <li><div></div></li>     -- HIDE
  <li><div></div></li>     -- SELECT
  <li><div></div></li>     -- HIDE
</ul>
<ul>
  <li><div></div></li>
  <li><div></div></li>
</ul>

我怎样才能以最佳方式解决这个问题？

我尝试过使用索引，但是在使用它时遇到了一些问题，并选择了正确的UL。正如您所看到的，我没有UL或LI的课程，所以我认为唯一的选择是LI。

我真正做的是在LI里面选择一个div所以，我得到了选定的LI的索引：

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

Answer 1

试过这样的事情？

$(this).closest('ul').find('li').not(this).hide();

或者

$('li', $(this).closest('ul')).not(this).hide();

Answer 2

您从点击的div遍历DOM，然后使用.not($(this).parent()).toggle()隐藏其他元素 - ＆gt;不是围绕此li

的div

$('div').click(function () {
    $(this).closest('ul').find('li').not($(this).parent()).toggle();
});

如果您不希望用户能够撤销其决定，则可以使用.toggle()替换

.hide()。

JS小提琴：http://jsfiddle.net/tDmy3/2/

Answer 3

获取包含所有相关<li>元素的jQuery元素集，然后删除所选元素。例如：

$('ul#mylist li').not(selector).hide();

来自JQuery documentation：

给定一个表示一组DOM元素的jQuery对象，.not（）方法从匹配元素的子集构造一个新的jQuery对象。提供的选择器针对每个元素进行测试;与选择器不匹配的元素将包含在结果中。

如果你有一个对它的引用，你也可以给元素对象本身而不是选择器。

Answer 4

这应该有效：

$( 'ul li' ).click( function( e ) {
        // by default, hide all li's
    $( 'ul li' ).hide();
        // show only the selected li
    $( this ).show();
});

http://jsfiddle.net/BqKun/

希望这有帮助。

隐藏除选中之外的所有LI

4 个答案: