Question

I have two div elements as below:

  <div class="sc-info" tags="abc mno">
     ....
  </div>

  <div class="sc-info" tags="abc xyz">
     ....
  </div>

I want perform hide() and show() based on value present in tags.Some thing like below

  $('div.sc-info[tags with "abc"]').hide()   // This should hide both divs

  $('div.sc-info[tags with "xyz"]').show()   //This should show only second one

Answer 1

Use the Attribute Contains Word Selector (~=) selector

http://api.jquery.com/attribute-contains-word-selector/

$('div.sc-info[tags~="abc"]').hide()

$('div.sc-info[tags~="xyz"]').show()

---

Response to comment:

Not working when I am checking for multiple word (i.e) str = “New York”; [str ~=”abc New York”] is not giving correct results. Is there any other way to do it?

To select multiple words within those attributes you’ll have to filter on div.sc.info for both possible attribute selectors.

$('div.sc-info').filter('[tags~="abc"],[tags~="New York"]').hide()

Example: http://jsfiddle.net/hunter/AS6Zp/