代码之家 › 专栏 › 技术社区 › Pradyut Bhattacharya

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

html-lists jquery-selectors jquery

Pradyut Bhattacharya · 技术社区 · 14 年前

我有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"));

不工作…

示例页在这里

示例页已更新…答案应该是……

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

正如帕特里克所回答的…

谢谢你的帮助…

谢谢
普拉杜特
印度

2 回复 | 直到 14 年前

user113716 14 年前

抱歉,如果这不是你要找的,但是你想要的结果是 li 总是带着孩子 ol 隐藏起来,

Test
   1
   2
   3
Another test
Cool Test
   1
   2

但是你的css隐藏了 锂 出于某种原因。

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

如果你把它藏起来 醇 元素

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

编辑:

可能有几种方法可以将所需内容添加到集合中。

这里有一个。它抓住了所有 锂 元素,然后过滤它们,以便只保留那些至少有一个兄弟的元素。

过滤器应用于顶层 锂 元素也是,但这没关系,因为它们不止一个(它们有兄弟姐妹)。

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

$collection.show();

自从 filter() 返回布尔测试的结果,执行

return ($(this).siblings('li').length );

如果长度大于0,则返回true。

有很多其他的方法,但是这个看起来很简洁。似乎也比我原来的答案好一点。

Kumu 14 年前

我用过 .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());
});