not able to get a processed list in jquery variable

Question

I have html list

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

Now i have hidden the list using the css...

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

I want to display the list and the only the descendants which have greater than 1 descendants...

the output should be...

Test
   1
   2
   3
Another test
Cool Test
   1
   2

I have used jquery and able to get the output...

the code i used...

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


            }

the sample page here

Now i want all the list in a single variable like i can get the lis in a variable...

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

but the code

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

is not working...

the sample page here

the sample page has been updated... the answer should be....

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

or

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

as answered by patrik...

Thanks for the help...

Thanks
Pradyut
India

Answer 1

Sorry if this isn't what you're looking for, but the result you want has the li always showing, with its child ol being hidden,

Test
   1
   2
   3
Another test
Cool Test
   1
   2

But your css hides the li elements for some reason.

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

If you instead hid the ol elements

#newlist ol {
    display:none;
}

You could simply do a filter, and show them as needed.

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

Otherwise, if you can't change your CSS, you need to do a little more work making sure everything gets shown properly.

Something like:

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

---

EDIT:

There are probably several ways to add what you want to a collection.

Here's one. It grabs all the li elements, then filters them so only those that have at least one sibling are kept.

The filter is applied to the top-level li elements too, but that's alright since there's more than one of them ( they have siblings ).

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

$collection.show();

Since filter() returns the result of a boolean test, doing

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

returns true if length is greater than 0.

There are, (I'm sure) plenty of other ways, but this one seems pretty concise. Seems a little better than my original answer too.

Answer 2

I used the .each to run the function on each ol
I think this is what you are trying to do
hope this helps!

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