CODEWITHSUNDEEP
jqueryhtml-table
eclipsis
eclipsis

Reputation: 1550

Show only <tr>'s that have <td>'s with no content?

I'm trying to create a jQuery toggle button with this usage:

EDIT (I think this logic is more concise): Hide only <tr class="todo-list">'s that have <td class="todo-assigned">'s WITH content.

$('#empty_items').on("click", function(e) {
    $(".todo-list").filter(function(i) { return $(this).find("> .todo-assigned:empty") }).toggle();
});

^That's what I have but I know it's not correct.

<tr class="todo-list">
    <td class="todo-assigned">CONTENT!</td>
</tr>

<tr class="todo-list">
    <td class="todo-assigned"></td>
</tr>

<tr class="todo-list">
    <td class="todo-assigned">CONTENT!</td>
</tr>

<tr class="todo-list">
    <td class="todo-assigned"></td>
</tr>

Upvotes: 0

Views: 220

Answers (1)

Blender
Blender

Reputation: 298166

Objects are truthy, so returning the jQuery object won't actually filter anything. Return its length instead, as empty jQuery objects have a length of 0, which is falsy:

return $(this).children('.todo-assigned:empty').length

You can also do this entirely within the selector string with :has, but it'll be slower:

$('#todo-list tr:has(> .todo-assigned:empty)').toggle()

Demo: http://jsfiddle.net/pu2KA/

Upvotes: 1

Related Questions