jquery :contains, :not(:contains) selections

Question

A table-based calendar contains weeks with both a date and a number per each date:

    <tr>
       <td>6<p>16</p></td>
       <td>7<p>16</p></td>
       <td>8<p>16</p></td>
       <td>9<p>16</p></td>
       <td>10<p>16</p></td>
       <td>11<p>16</p></td>
       <td>12<p>16</p></td>
    </tr>

Using scripting like $(".table td:contains(0)").css({"background-color": "#900", "color": "white"}); I want to select the color and background-color of all td's containing '0', but not '10', '20', or '30'. At the same time, I want to select the color of all p's containing '0', but not '10'.

I've tried jquery's :contains and :not(:contains), but don't know how to include multiple values in the :not(:contains) series to avoid css changes in the td's 10, 20 and 30 or the p's 10.

Ideas welcome.

You'd have better to use jq `filter()` method, validating it with a regex. That's said, you should provide example in question itself of what you are looking for, including expected behaviour. `I want to select the color and background-color of all td's containing '0', but not '10', '20', or '30'` So you want to select `0`, `40` or what? — A. Wolff, Aug 05 '15 at 16:51
Or, if you don't want to use filter, but you can get it so that every td has its value in an attribute (i.e. `6...`), you could use a selector like `.table td[data-date='0']`. — Hayden Schiff, Aug 05 '15 at 16:54
EDIT: i miss this part `calendar` so indeed i'm really not sure what you are expecting — A. Wolff, Aug 05 '15 at 16:56
Structure the html with classes and attributes that let you work with it's content more efficiently. Current approach is more code intensive than needed — charlietfl, Aug 05 '15 at 17:11

score 0 · Answer 1 · answered Aug 05 '15 at 17:09

If you did it using the :contains selector, you could chain them like so:

$(".table td:contains('0'):not(:contains(10)):not(:contains(20)):not(:contains(30))").css({"background-color": "#900", "color": "red"});

(See Fiddle)

However, this is really ugly and hard to read. I would suggest following @A. Wolff's advice and use .filter:

$(".table td:contains(0)").filter(function() {
     return !/10|20|30/.exec($(this).text());
});

(See Fiddle)

score 0 · Accepted Answer · answered Aug 05 '15 at 17:29

You'd be better of using .filter() to go thru all the TDs and return the ones that met the condition.

Create a clone of each td
Grab the content in the P
Remove the P from the clone
Now grab the content of the TD
Return the TDs that met the condition

Below is a demo:

var $tds = $("tr > td").filter(function() {

    var $td = $(this).clone();
    var p_content = parseInt($td.find("p").text(), 10);
    $td.find("p").remove();
    var td_content = parseInt($td.text(), 10);
    return !p_content || !td_content;
});

//Apply some CSS to the matched TDs
$tds.css({"background-color": "green"});

//Now find all the Ps with zero or less value
//and apply your CSS
$tds.find("p").filter(function() {
    return !parseInt($(this).text(), 10)
}).css({"color": "#fff"});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
       <td>6<p>16</p></td>
       <td>0<p>16</p></td>
       <td>8<p>0</p></td>
       <td>9<p>16</p></td>
       <td>10<p>0</p></td>
       <td>11<p>16</p></td>
       <td>10<p>0</p></td>
    </tr>
</table>

The filter method looks to be best, but I'd better re-explain my needs: Since each month in my calendar table has dates in and each month has the 10th, 20th, and 30th except Feb, I don't want those 's background and colors changed, BUT I do want 's with
containing 0 (zero) to change, AND I want the
to be white. Hope this helps . . . — robincham, Aug 05 '15 at 17:49

jquery :contains, :not(:contains) selections

2 Answers2