How to find all elements that are not within a data-attribute

Question

Using jQuery / Underscore, Given the following list. How can I find all .msg elements that are not within an li w data-allow-html="true"

<ol>
    <li><div class="msg">message</div></li>
    <li data-allow-html="true"><div class="msg">message</div></li>
    <li><div class="msg">message</div></li>
    <li data-allow-html="true"><div class="msg">message</div></li>
    <li><div class="msg">message</div></li>
    <li data-allow-html="true"><div class="msg">message</div></li>
    <li><div class="msg">message</div></li>
    <li data-allow-html="true"><div class="msg">message</div></li>
</ol>

I currently have:

$('#mydiv').find('.msg').each(function() {}

And have tried:

$('#mydiv').find('li').not('data-allow-html="true"').find('.msg').each(function() {}

Which does not seem to work. Ideas? Thanks

Answer 1

You can use the following to get all the <li> withing #mydiv , then checking for not() containing the attribute, then finding each .msg

$('#mydiv li').not('[data-allow-html="true"]').find('.msg').each(function() {
    // your code
});​

Answer 2

In your code this is not('data-allow-html="true"')
supposed to be not('[data-allow-html="true"]') .. // Missing []

You can also try it this way

 $('li').not('[data-allow-html]').find('.msg').each(function() {

       $(this).css('color', 'orange')
        // Your code here
 });

//OR

$('li:not([data-allow-html])').find('.msg').each(function() {

});

Check FIDDLE