Question

我有HTML列表

<ol id="newlist">
        <li>Test
            <ol>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ol>
        </li>
        <li>Another test
            <ol>
                <li>1</li>
            </ol>
        </li>
        <li>Cool Test
            <ol>
                <li>1</li>
                <li>2</li>
            </ol>
        </li>
    </ol>

现在我使用css隐藏了列表...

        #newlist li {
            display:none;
            list-style: none;
        }

我想显示列表，只显示有大于1个后代的后代...

输出应该是......

Test
   1
   2
   3
Another test
Cool Test
   1
   2

我使用过jquery并且能够获得输出......

我使用的代码......

   $("ol#newlist > li").show();


            for (var i = 0; i < $("ol#newlist > li").length; i++)
            {
                if ($("ol#newlist > li:eq(" + i + ") ol > li").length > 1)

                $("ol#newlist > li:eq(" + i + ") ol > li").show();


            }

示例页面here

现在我希望所有列表都在一个变量中，就像我可以在变量中得到lis ...

      var $li = $("ol#newlist > li");

但是代码

      $li.add($("ol#newlist > li:eq(" + i + ") ol > li"));

无效...

示例页面here

示例页面已更新......答案应该是......

     var $li = $("ol#newlist > li").add(
                    $('#newlist').children('li').children('ol').filter(function() {
                        return $(this).children().length > 1;
                    }).children()
            );
     $li.show();

或

  var $li = $('#newlist').find('li').filter(function() {
                return ($(this).siblings('li').length );
            });
  $li.show();

由patrik回答......

感谢您的帮助...

感谢
Pradyut
印度

Answer 1

很抱歉，如果这不是您要查找的内容，但您想要的结果始终显示li，其子ol被隐藏，

Test
   1
   2
   3
Another test
Cool Test
   1
   2

但是你的css出于某种原因隐藏了li元素。

#newlist li {
        display:none;
        list-style: none;
    }

如果您改为隐藏ol元素

#newlist ol {
    display:none;
}

你可以简单地做一个过滤器，并根据需要显示它们。

    $('#newlist').show().find('ol').filter(function() {
        return $(this).children().length > 1;
    }).show();

否则，如果您无法更改CSS，则需要做更多工作，确保所有内容都正确显示。

类似的东西：

$('#newlist').show().children('li').show().children('ol').filter(function() {
        return $(this).children().length > 1;
    }).children().show();

修改

可能有几种方法可以将您想要的内容添加到集合中。

这是一个。它抓取所有li个元素，然后对它们进行过滤，以便只保留那些至少有一个兄弟的元素。

过滤器也应用于顶级li元素，但这没关系，因为它们不止一个（他们有兄弟姐妹）。

var $collection = $('#newlist').find('li').filter(function() { return ($(this).siblings('li').length ); }); $collection.show();

由于filter()返回布尔测试的结果，执行

return ($(this).siblings('li').length );
如果length大于0，则
返回true。

有（我确定）还有很多其他方法，但这个方面看起来非常简洁。似乎也比我原来的答案好一点。

Answer 2

我使用.each在每个ol上运行函数我想这就是你要做的事希望这有帮助！

$("#newlist").show();
    var $li = new Array();
    $("#newlist > li").each(function(index){
        if($("> ol > li", $(this)).length > 1){
            $("> ol", $(this)).show();
            $("> ol > li", $(this)).each(function(){
                $li.push($(this));
            });
        } else {
            $("> ol", $(this)).hide();
        }   
    });

$($li).each(function(){
    alert($(this).text());
});

无法在jquery变量中获取已处理的列表

2 个答案: