1

I want this to happen if it contains "Thing " (Thing 1, Thing 2) but not if it says "Things"

$("nav#breadcrumbs:contains('Thing')").append("<p>I'm a Thing</p>");  
Tunaki
  • 132,869
  • 46
  • 340
  • 423
nathanbweb
  • 717
  • 1
  • 11
  • 26

1 Answers1

2

Couple different formatting options, but the key is that you want to use the not selector in combination with :contains:

$("nav#breadcrumbs:contains('Thing'):not(:contains('Things'))").append("<p>I'm a Thing</p>");

$("nav#breadcrumbs:contains('Thing')").not(":contains('Things')").append("<p>I'm a Thing</p>");
Elliot B.
  • 17,060
  • 10
  • 80
  • 101
  • The .not() method will end up providing you with more readable selections than pushing complex selectors or variables into a :not() selector filter. In most cases, it is a better choice. – dopeddude Jan 25 '13 at 22:01
  • Agreed, that's why I provided both options :) – Elliot B. Jan 25 '13 at 22:01
  • Technically speaking, the first is the better option (where applicable) as to perform the match, it accesses the DOM just once, unlike the second, which has to access the DOM n+1 times, where n is the number of DOM elements that match the first selector. At least, this is my understanding... – SEoF Jan 25 '13 at 22:17
  • The second example does access the DOM again, but it's not traversing the DOM (which is much more expensive). The elements have already been selected and added to an array. The `.not` just loops over each item and applies the qualifier. – Elliot B. Jan 25 '13 at 22:31