Question

I have an html table where one of the columns contains <span>s with comma-delimited data. I want to come up with a jQuery selector that returns all of the rows (<tr>s are preferable, but the <span>s will work for now) where one of the comma-delimited tokens <span> in a span tag matches a supplied string.

I started with something like the following:

$('td.col_8 span:contains("duck")')

which will get me all spans in a particular column containing the word ‘duck’. However, it could also match <span>fox, mallard-duck</span>. Since ‘duck’ is not a unique token in that span, I wouldn’t want that included in the match.

Is there a way to narrow my result set so I’m only including results where there’s an exact match to a particular token in a column-delimited list?

(I’m using jQuery 1.2.3)

Answer 1

This is where the beauty of jQuery expressions come in.

You can add your own custom selector. I’m going to call it tag in this case

jQuery.expr[":"].tag = function(elem, index, match, nodeList) {
    var tags = $(elem).text().replace(/(?:\ +)?,(?:\ +)?/g, ",").split(",");
    return tags.indexOf(match[3]) > -1;
}

This will check each previously matched element against this selector. Fist it flattens the , seperations (so something like “firstTag , onotherer, badly , spaced, tag” will work). jQuery already takes care of parsing the selector and passes it in as match. match[3] is what you’re interested in. With the following usage match[3] will be ‘duck’

$('td.col_8 span:tag("duck")')

the return line will return true of false based on the tag being in the list.