2

Caveat: I'm not a developer, I'm a designer.

From this answer I learned of the :contains() selector.

I used this selector like this:

jQuery(document).ready(function() {
    jQuery("td:contains('No')").css("background-color", "#FFBFBF");
});

However, this selects td cells containing Not, which I don't want to happen.

I found there is a .filter() selector from this answer, but I'm not a programmer, and do not understand how to apply .filter() to my jQuery code, so I'm wondering if there is something that functions like an is() or equals() selector?

Community
  • 1
  • 1
Steve
  • 2,066
  • 13
  • 60
  • 115

4 Answers4

3

For an absolute match using filter():

jQuery("td").filter(function(){
    return jQuery(this).text().trim() === 'No';
}).css("background-color", "#FFBFBF");
charlietfl
  • 170,828
  • 13
  • 121
  • 150
  • 1
    adding a class with style would be more clean right?rather than applying straight forward css using jquery it would be more flexible. but nonetheless perfect answer :) – guradio Jun 14 '16 at 02:45
  • Yes...also easier to reverse by removing class and not have to parse inline styles – charlietfl Jun 14 '16 at 02:46
  • Hi Charlie. I replaced my original code with your code and unfortunately `No` are not being given a `background-color: #FFBFBF;` – Steve Jun 14 '16 at 06:11
  • Works fine here https://jsfiddle.net/oefrg1tn/. Make sure elements exist when you run the code – charlietfl Jun 14 '16 at 12:45
  • That's odd. Code is run inside `jQuery(document).ready(function() {}` and there are definitely `s` [containing 'No`](https://i.imgur.com/P999SbD.png). – Steve Jun 15 '16 at 05:12
  • I assume so. The code runs in the ``, the ``'s are created in the ``. – Steve Jun 17 '16 at 04:40
  • Hi @charlietfl, I added a bounty to this question if you can help me determine why your solution is not working in my environment. – Steve Jun 19 '16 at 03:34
  • As you have mentioned in your previous comment 'jQuery' instead of the dollar sign, have you replaced all of them in this snippet? – Siavas Jun 22 '16 at 11:37
  • Edited my solution and switched `$` to `jQuery` ... try that. Look in browser console for any errors – charlietfl Jun 22 '16 at 16:10
1

There is no such selector by default, but you can build your own, and filter the things in the way you want.

How to add a new selector

jQuery.expr[":"] is an object containing the available selectors (e.g. :visible, :checked and lots others). Here you want to add a new selector. So, in that case, the selector name will be the key, and the value will be a function receiving in the first argument the element.

If this function returns true, the element is matched, otherwise (if it's false), the element is not matched.

For example, this is the :checked definition:

jQuery.expr[":"].checked = function (el) {
   return el.checked === true;
};

Adding :containsExact

Simply, extend or append directly the method in the jQuery.expr[":"] object:

jQuery.expr[":"].containsExact = function (el, textToSearch) {
   return el.textContent === textToSearch;
};

Example

// Add the containsExact selector
jQuery.expr[":"].containsExact = function(el, index, args) {
  return el.textContent === args[3];
};

// Highlight the spans containing "Mars" in red
jQuery("span:containsExact('Mars')").css("background", "#F82125");

// Highlight "Hello World" in yellow
jQuery("span:containsExact('Hello World')").css("background", "#F5C700");

// Highlight the "Hello Mars" (without exclamation mark) in blue
jQuery("span:containsExact('Hello Mars')").css("background", "#0696DE");
span {
  padding: 8px;
  margin: 8px;
  display: inline-block;
  font-family: Arial;
  font-weight: bold;
  color: #293E51;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span><span>Hello</span> <span>World</span></span><br>
<span><span>Hello</span> <span>Mars</span></span><br>
<span><span>Hello</span> <span>Mars</span></span>!<br>
<span><span>Hello</span> <span>Mars</span>!</span>
Ionică Bizău
  • 109,027
  • 88
  • 289
  • 474
0

I got all the td tags on a simple JSP page I created to change to the appropriate color using the following code. (This code was placed inside the head section of my JSP page within script tags)

$(document).ready(function(){
    $("td").each(function(){
        if($(this).html() == 'No')
        {
            $(this).css("background-color", "#FFBFBF");
        }
    });
});

All that I am doing here is this

  1. Selecting all the td tags on my page
  2. Checking if the text inside the td is No
  3. If yes, change it to the appropriate color. If no, just ignore it
Aditya Gupta
  • 633
  • 1
  • 4
  • 11
-1

Instead of using complex solutions, simply use .not() to deselect elements containing 'Not' or any other word don't wanna include ;-) 

.not(":contains('Not')")

Your code should look something like this...

jQuery("td:contains('No')").not(":contains('Not')").css("background-color", "#FFBFBF");

Here's a snippet...

jQuery(document).ready(function() {
    jQuery("td:contains('No')").not(":contains('Not')").css("background-color", "#FFBFBF");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3> What for breakfast today? </h3>
<table border=1 cellspacing=0>
  <tr>
    <td>Tea</td>
    <td>No</td>
  </tr>
  <tr>
    <td>Coffee</td>
    <td>No</td>
  </tr>
  <tr>
    <td>Orange juice</td>
    <td>Yeah</td>
  </tr>
  <tr>
    <td>Champagne</td>
    <td>Not for breakfast!</td>
  </tr>
</table>
shramee
  • 5,030
  • 1
  • 22
  • 46