Basic Jquery - If Text exists in a TD then Make a DIV Visible

Question

I'm trying to make a Div on the page Appear if a word exists later on the page? , what i'd actually like it to do is display if any words in a list of 10 appear on the page? The only place I want to look for them is inside of that TD class "sku nobr" after that span class "td-title"

I'm a total rookie at this, I got it to work for a H1 value with this code but I don't know how to do it with the 4523 where it is now??

THANKS!!!!!

<script type="text/javascript">
$(document).ready(function(){
 if ($(".sku nobr:contains('4523')").length) {
   $("#thingtohide").removeAttr("style").none();
}
});
</script>

  <div id="thingtohide" style="display: none;">COOL TEXT TO DISPLAY</div>

    <tr class="cart-item-row">
      <td class="sku nobr">
        <span class="td-title">SKU:</span>
        4523
      </td>
    </tr>

Duplicate: [Jquery: Checking to see if div contains text, then action](http://stackoverflow.com/questions/902597/jquery-checking-to-see-if-div-contains-text-then-action) — Andy Hoffman, Apr 22 '16 at 00:17

Mikey · Accepted Answer · 2016-04-22T16:17:19.107

First, your HTML is not valid. You're missing the <table></table> tags.

<div id="thingtohide" style="display: none;">COOL TEXT TO DISPLAY</div>
<table>
    <tbody>
        <tr class="cart-item-row">
            <td class="sku nobr">
                <span class="td-title">SKU:</span>4523
            </td>
        </tr>
    </tbody>
</table>

Second, your selector is wrong. Replace .sku nobr:contains('4523') with .sku:contains('4523')

$(document).ready(function(){
    if ($(".sku:contains('4523')").length) {
        $("#thingtohide").show();
    }
});

Edit If you are looking for any number (which can include commas), you have to be more creative. You can use the filter method. Here's another demo.

$(document).ready(function(){
    // find TD with class 'sku' containing numbers
    var $sku = $("td.sku").filter(function () {
        // assuming the number is 4523,8563,9997,7757
        // text = $.trim($(this).text());     => SKU:4523,8563,9997,7757
        // text = text.replace(/SKU:|,/g, ''); => 4523856399977757
        var text = $.trim($(this).text().replace(/SKU:|,/g, ''));
        // check that it is a number
        return text && !isNaN(text);
    });
    // check if there are any matches
    if ($sku.length) {
        $("#thingtohide").show();
    }
});

Thanks, I apologize for the typos, I posted this when I was trying to leave my office. The actual class is I it did not think the table tags were relevent to the sample. Also when I did change the class to sku, instead of sku nobr as a test it still does not work? — Casey, Apr 22 '16 at 01:32
Are you sure you are linking the jQuery correctly? Here's a [demo](http://jsbin.com/xubakoreci/edit?html,js,output) of the code working. — Mikey, Apr 22 '16 at 03:12
Sorry again, this is working for me.. one last question.. I actually need to check if the "sku nobr" Td contains any of a list of numbers? (prouct skus) actually... .so lets say 4523,8563,9997,7757,or 5466, if any of those numbers exist in that td that this code looks in ,I'd like it to do the same thing it's doing now for 4523? — Casey, Apr 22 '16 at 13:54

score 1 · Answer 2 · answered Apr 22 '16 at 00:13

1

It looks like you've got a minor typo.

$(".sku nobr:contains('4523')")

Change to:

$(".sku.nobr:contains('4523')")

Multiple classes need to be separated by a ., not a space.

answered Apr 22 '16 at 00:13

smaili

1,245
9
18

I'm not sure if I follow you? The class is Also, as a test I tried out $(".sku.nobr:contains('4523')") and $(".sku:contains('4523')") both of those do not work? – Casey Apr 22 '16 at 01:34

score 0 · Answer 3 · answered Apr 22 '16 at 14:11

0

for checking if a cel contains multiple pieces of text I did this:

<script>
$(document).ready(function(){
    if ($(".sku:contains('4523'),.sku:contains('5678')").length) {
        $("#thingtohide").show();
    }
});
</script>

answered Apr 22 '16 at 14:11

Casey

105
10

Basic Jquery - If Text exists in a TD then Make a DIV Visible

3 Answers3