JQuery : contain one of the following words

Question

On this line I'm trying to select <tr>'s that contain either one of these words but doesn't contain an image but it's not working, basically when I use it on the page, the page is blank.

$('#SubscribersManageList tr:contains("CIUDAD EVITA"), tr:contains("MORENO"), tr:contains("CORRIENTES"), tr:contains("LA MATANZA"), tr:contains("QUILMES"), tr:contains("LOMAS DE ZAMORA"), tr:contains("LANUS"), tr:contains("AVELLANEDA"), tr:contains("CORDOBA"), tr:contains("CAPITAL FEDERAL"), tr:contains("RAMOS MEJIA"):not(:has(img[src*="images/plus.gif"]))').css("background-color", "red").insertAfter("tr.Heading3:last");

How to do it, perhaps in a simplier way, if the line contains either one of the following words?

You can test here: http://jsfiddle.net/cwar3/1/

Answer 1

You either have to have the #SubscribersManageList with every comma piece separately or you can do like I did below and pass it just once as the context. I would probably write it like this (broken up onto multiple lines only for readability here - you have to put it back on one line to use it):

$('tr:contains("CIUDAD EVITA"), 
   tr:contains("MORENO"), 
   tr:contains("CORRIENTES"), 
   tr:contains("LA MATANZA"), 
   tr:contains("QUILMES"), 
   tr:contains("LOMAS DE ZAMORA"), 
   tr:contains("LANUS"), 
   tr:contains("AVELLANEDA"), 
   tr:contains("CORDOBA"), 
   tr:contains("CAPITAL FEDERAL"), 
   tr:contains("RAMOS MEJIA")', $("#SubscribersManageList"))
       .not('img[src*="images/plus.gif"]')
       .css("background-color", "red")
       .insertAfter("tr.Heading3:last");

Per your comments, if you want to insert them back into the DOM in a specific order, I'd suggest this:

var containValues = [
   "CIUDAD EVITA",
   "MORENO", 
   "CORRIENTES", 
   "LA MATANZA", 
   "QUILMES", 
   "LOMAS DE ZAMORA", 
   "LANUS", 
   "AVELLANEDA", 
   "CORDOBA", 
   "CAPITAL FEDERAL", 
   "RAMOS MEJIA" 
];

var context = $("#SubscribersManageList");
var target = context.find("tr.Heading3:last");
for (var i = containValues.length - 1; i >= 0; i--) {
    context.find('tr:contains("' + containValues[i] + '")')
        .not('img[src*="images/plus.gif"]')
        .css("background-color", "red")
        .insertAfter(target);
}

You can see it work here: http://jsfiddle.net/jfriend00/MzgbV/.

This will go through the array one at a time, finding, styling and then inserting each one and will process them in the array order. It actually goes through the array backwards so the last one inserted ends up first.

Answer 2

Instead of useing :contains, you can use a regular expression in a .filter() call:

$(selector).filter(function() 
{
    return /some regex/.test( $(this).text() );
});

So it would look like:

$('#SubscribersManageList tr').filter(function() 
{
    return /CIUDAD EVITA|MORENO/.test( $(this).text() );
});

Answer 3

This filter is getting so complex that you might want to think about using the jQuery.fn.filter function:

$('#SubscribersManageList tr').filter(function(){
  if($(this).has('img[src*="images/plus.gif"]')){
    return false;
  }
  return ($(this).text().search(/(CIUDAD EVITA|MORENO|CORRIENTES|etc)/) > -1);
})
.css("background-color", "red")
.insertAfter("tr.Heading3:last");