jQuery Selectors and Filtering

Question

Hi all:

I'm just getting going with jQuery and am pretty excited about it.

My reason for posting is that I've written some jQuery that does it's required task, but I'm suspecting that it lacks a little in elegance...

I'm trying to grab all table rows that have: 1) a class of 'item' 2) a child text input box that has a value

The HTML:

<tr class="item">
    <td class="sku">[dynamic]</td>
    <td class="quantity">
        <input type="text" name="[dynamic]" maxlength="3" /></td>
</tr>

The jQuery

...
var selections=$(".item>.quantity>:text[value!='']").parent().parent();
...

The code I posted above works, but there are two things (at least?) that smell a little funny.

Code smell #1: I'm using '.parent().parent()' at the end to grab the whole row. Is there some way that I can just say, "give me all tr's with a class of 'item' where the child text input has a value" instead of backtraking up the heirarchy at the end?

Code smell #2: I can't figure out a way to 'trim' the text input's value during the selection to ensure that whitespace isnt interpreted as content. With my current method, I would have to 'trim' and check again during the .each loop, which seems redundant.

Let me know if you see a 'better way'?

Thanks, Richard

Answer 1

#1

Use this instead (note the has selector):

var selections=$(".item:has(>.quantity>:text[value!=''])");

#2

Spaces are usually considered to be valid input, so if your application specifically needs otherwise, it's ok to filter in a loop using $.trim().

Answer 2

I'm not sure if you are doing this intentionally, but you don't have to traverse down each child down to the input. Unless you have a reason for doing so, this is just as good:

var rows = $('tr.item:has(input:text[value!=''])');

Also note that the jQuery documentation suggests you preface :text with input as leaving it out is equal to *:text which is a very slow selector.