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/

jfriend00 · Accepted Answer · 2012-01-29T04:39:18.350

2

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.

edited Jan 29 '12 at 04:39

answered Jan 28 '12 at 22:59

jfriend00

683,504
96
985
979

this doesnt work, ive just tested it, do u mind trying a different version here so u can see if it works? http://jsfiddle.net/cwar3/1/ – sebas Jan 28 '12 at 23:04
@Sebas - It seems to work for me here: http://jsfiddle.net/jfriend00/fKWKG/. I've simplified it to just turn the items red so I can more easily see what it's operating on. – jfriend00 Jan 28 '12 at 23:08
ok i see it works for jquery 1.71 but not for the jquer im using which is 1.32 why? – sebas Jan 28 '12 at 23:10
Actually, it works for me here in 1.3.2: http://jsfiddle.net/jfriend00/fKWKG/4/. Why use such an old version of jQuery? There must be something different about your real page. Are you waiting for the DOM to be loaded? – jfriend00 Jan 28 '12 at 23:12
ok i upadted to 1.71 and its still not working for me so the version wasnt the issue – sebas Jan 28 '12 at 23:17
@sebas - It works in the jsFiddle so there's something in your real page that is causing the problem. We can't do much else until you disclose more of that to us. – jfriend00 Jan 28 '12 at 23:19
In your jsfiddle you can see its not working becuase its only selecting the rows but not pushing them at the top like it was supposed to. This jsfiddle shows it works : http://jsfiddle.net/cwar3/4/ But the thing is when i implement on my page even after updating to jquery 1.71 its not working, the table itself goes blank – sebas Jan 28 '12 at 23:22
OK your code now WORKS! BUT as i said its not pushing them at the top where ti says inserafter. would u mind taking a look? we are 1 step from the solution – sebas Jan 28 '12 at 23:24
hey one more thing, how can u make it so it pushed them to the top of the table in the ORDER u are stating them? so for example in ur code "CIUDAD EVITA" needs to be at the top, and then the second place for "moreno" etc. – sebas Jan 28 '12 at 23:54
@sebas - you can't control the order of elememts within the jQuery selector. jQuery puts them in DOM order. So, if you need to process them in a specific order, I'd recommend processing them one at a time in the desired order. I've added an option to my answer that shows how to do that. – jfriend00 Jan 29 '12 at 00:43
Ive tried this new code unfortunately it didnt work, its not even doing what the previous one was doing. – sebas Jan 29 '12 at 03:37
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/7135/discussion-between-sebas-and-jfriend00) – sebas Jan 29 '12 at 03:41
I fixed a typo in the code. It works in this jsFiddle: http://jsfiddle.net/jfriend00/MzgbV/. Are you aware that you can see errors in your code in the error console or debug console and probably fix them yourself? – jfriend00 Jan 29 '12 at 04:46

Avaq · Answer 2 · 2012-01-28T23:13:49.430

1

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");

edited Jan 28 '12 at 23:13

answered Jan 28 '12 at 23:03

Avaq

3,009
1
21
25

score 0 · Answer 3 · answered Jan 28 '12 at 22:59

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() );
});

JQuery : contain one of the following words

3 Answers3