jQuery - Check if the tag's content is equal to sometext then do something

Question

Let's say I have many of these in my content div : <cite class="fn">blabla</cite>

How can I check every cite tag's content (in this case: blabla) with class fn to see if it equals to "sometext" then change it's color to red ?

Very simple.

Stlouis

Answer 1

$('cite.fn:contains(blabla)').css('color', 'red');

Edit: though that will match "blablablabla" as well.

$('cite.fn').each(function () {
    if ($(this).text() == 'blabla') {
        $(this).css('color', 'red');
    }
});

That should be more accurate.

Edit: Actually, I think bazmegakapa's solution is more elegant:

$('cite.fn').filter(function () {
    return $(this).text() == 'blabla';
}).css('color', 'red');;

Lebbie

Also matches <cite class="fn">textblabla</cite>, which may cause problems if the search term could easily be a substring. – Bony

Answer 2

You can make use of the amazing .filter() method. It can take a function as its parameter, which will reduce the jQuery collection's elements to those that pass its test (for which the function returns true). After that you can easily run commands on the remaining elements:

var searchText = 'blabla';

$('cite.fn').filter(function () {
    return $(this).text() === searchText;
}).css('color', 'red');

jsFiddle Demo

Portend

About jQuery performance, better pre-selector is better? Example: $("cite.fn:contains('"+searchText+"')").filter(function(){return $(this).text().length==searchText.length}); – Armourer

@PeterKrauss I would not say it is better. :contains() is not a standard selector, so jQuery has to use its own engine, not the faster native one (which it normally uses). So what you win on the one side, you lose on the other. You could do a jsPerf benchmark and post the result here. – Portend

Good, the test is there (you can check the link and correct the test if wrong). The pre-selector strategy is not good, your original code is faster. – Armourer

@PeterKrauss Nice test. Basically this is why you should not use not-standard jQuery selectors most of the time. If the native querySelectorAll() supports the selector, it is much quicker. – Portend

Answer 3

You could potentially do something like:

$('cite.fn').each(function() {
  var el = $(this);
  if (el.text() === 'sometext') {
     el.css({ 'color' : 'red' });
  }
});

This fires a function against each cite that has the class fn. That function checks if the current cite's value is equal to 'sometext'.

If it is, then we change the CSS color (text-color) property to red.

Note I'm using jQuery in this example, as you've specifically tagged your question jQuery. Ignore the downvote, this was applied before I edited a typo that I'd made (el.val() rather than el.text())

Bikaner

@kolink so you change it to .html() or .text() instead and it will work. Btw it's not jQuery that makes people stupid, it's the entire Internet. – Theiss

@Kolink You're right with the first part. For the second part... you can still edit your comment. jQuery makes noone stupid. – Portend

@Kolink does using native javascript make you arrogant then? – Flacon

Every site I have seen that was made using jQuery could be made to work a hundred times faster and more efficiently without it [shrugs] Anyway, I'm pretty sure someone downvoted my answer just because of my comment, which is real mature [/sarcasm] My answer works, and has no dependencies. – Bony

@Kolink its good to see that a single typo renders someone stupid. But I do apologise all the same... WOW! Note that not everyone who gives an example in jQuery ONLY writes using jQuery – Bikaner

@Kolink After your first comment you sound quite funny when you talk about being mature :). jQuery is a wonderful tool when you use it right. If you are a bad programmer, you can write bad programs with vanilla JS as well. The problem is not with jQuery. (BTW, I see no downvotes on your answer) – Portend

Answer 4

Without jQuery:

var elms = document.querySelectorAll("cite.fn"), l = elms.length, i;
for( i=0; i<l; i++) {
    if( (elms[i].innerText || elms[i].textContent) == "blabla") {
        elms[i].style.color = "red";
    }
}

Bony

Note that querySelectorAll will not natively work in IE7 and below. Not having to worry about this too much would be a benefit of using a JavaScript framework such as jQuery. – Bikaner