Select element if contains text

Question

I can't get this one to work and I can't find any similar question that does the same what I want.

I have a table with rows like this:

<div class="gui-table">
          <table>
             <tr>
                <td></td>
                <td></td>
                <td></td>
              </tr>
              <tr>
                <td></td>
                <td><p class="customfields">Size</p></td>
                <td></td>
              </tr>
           //etc... 

I want to check if all the second cells have the text "size" in it! If so then hide the third td .

So what I thought what would work is this:

 $('.gui-table tr').each(function(){

  if ($('td:nth-child(2) .customfields:contains("Size")').length > 0) {
     $(this).css('visibillity', 'hidden');
   }
 });

This doesn't work! Does anybody see what is wrong with this?

Answer 1

Just do:

$('.gui-table .customfields:contains("Size")').css('visibility', 'hidden');

Fiddle: http://jsfiddle.net/cfmrngcc/2/

Answer 2

Assuming I understand your question correctly the following should do it:

 $('.gui-table p.customfields:contains("Size")').parent().next().hide(); 

 td { border: 1px solid black; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="gui-table"> <table> <tr> <td></td> <td></td> <td>Shown</td> </tr> <tr> <td></td> <td><p class="customfields">Size</p></td> <td>Hidden</td> </tr> </table> </div> 

This will hide the next table cell after any table cell containing ap tag with the text Size.

It works by finding the P tags containing size inside the gui-table - $('.gui-table p.customfields:contains("Size")')

Then using .parent() to select it's parent table cell.

And finally .next() and .hide() to select the next table cell and hide it.

Answer 3

I banged around on this and came up with this JSFiddle that should get you going again. The essential function is much like you started with but modified like this:

    function doItNow(e)
    {
        $('.gui-table tr').each(function ()
        {
            $('td:nth-child(2) .customfields:contains("Size")').each(function ()
            {
                $(this).parents('tr').children('td:nth-child(3)').css('visibility', 'hidden');
            });
        });
    }

Note that the inner each() is passing the paragraph element and not the cell element. So I traversed up the parents() chain until I find the row and hide the 3rd child. You might be able to code this without the inner each but I am too lazy to be that complicated!

Answer 4

If you only want to hide the third column, when there is the word 'size' in the second one you can do this in that way:

$('.gui-table td:nth-child(2):contains("Size")').next().css('visibility', 'hidden');

Here is a jsfiddle: http://jsfiddle.net/0qczvak5/

The explanation:

Select all elements with the class name .gui-table , select all second td s with td:nth-child(2) , filter them with :contains("Size") . Now you have all second td s with the word "Size" and with .next() you get the following cell (the third one) and you hide it with .css('visibility', 'hidden') .

Answer 5

$(".gui-table tr td:nth-child(2)").each(
    function (index,tag){  
        if ($(tag).find("p").text() == "Size") 
        $(tag).css('visibility', 'hidden');
   }
 )

This is will work .