CODEWITHSUNDEEP
javascriptjquerycssjquery-selectorscss-selectors
DontVoteMeDown
DontVoteMeDown

Reputation: 21475

Select LI children from a not none-displayed UL

The title sounds strange but what I want to achieve is simple.

In a tree of uls I want to get all li children from any ul that have not the - inline - style display: none. So I found this post and I mixed with the negation function :not(). The result was:

'ul:not([style*="display: none"]) .k-item'

Where .k-item is a common class for all my li elements. That selector worked in this simple fiddle. The problem is that it doesn't works in my application. I have a screenshot of some console commands that will illustrate my scenario:

enter image description here

As you can see on second command, it returns some li elements that lies under an ul which haves display: none among other attributes in its inline style. Example of those unexpected li with attribute data-uid with values starting with 099d, bbca and 14d2.

I don't know what I'm doing wrong or if exists a better selector for that purpose.

Upvotes: 2

Views: 1111

Answers (3)

madushak
madushak

Reputation: 250

First of all get all the li and check whether its parent (ul) is visible.

jsfiddle

$('li', '#layers').each(function(){
    if($(this).parent().is(":visible")){
        alert($(this).text())
    }
});

OR

a neat version jsfiddle

$(".k-item:visible").each(function(){
     alert($(this).text())
});

Upvotes: 1

JerryHuang.me
JerryHuang.me

Reputation: 1790

Try using

$('ul:not([style*="display: none"]) li.k-item').each(function() { alert($(this).html()) });

HTML

    <ul style="display: none">
       <li class="k-item">1</li>
       <li class="k-item">2</li>
       <li class="k-item">3</li>
    </ul>    
    <ul>
        <li class="k-item">4</li>
        <li class="k-item">5</li>
        <li class="k-item">6</li>
    </ul>

Fiddle: http://jsfiddle.net/3M2ZM/

Upvotes: 0

jfriend00
jfriend00

Reputation: 708186

I would suggest using jQuery's :visible rather than looking for something in the style string and string matching in the style string could be problematic.

$("ul:visible .k-item")

Upvotes: 4

Related Questions