CODEWITHSUNDEEP
htmlcsscss-selectorscufon
Ian Hunter
Ian Hunter

Reputation: 9774

How can I prevent Cufón from replacing text in elements under a certain class?

I'm using Cufón to replace text on a webpage, and I have the jQuery library loaded. I'm trying to replace all instances of <li> elements (among others like <p>, et cetera), but only when they don't appear under a certain class.

Here is some sample HTML:

<ul>
   <li>This</li>
   <li>Should</li>
   <li>Be Replaced</li>
</ul>
<div>
  <ul>
    <li>So should</li>
    <li>this</li>
  </ul>
</div>
<div class='no-cufon'>
   <ul>
      <li>Don't replace this</li>
   </ul>
</div>

Note that most of my HTML is dynamic--otherwise I'd just go ahead and change the markup.

I'm using the command Cufon.replace('*:not(.no-cufon) li'); to replace the text, but it's still targeting all <li> tags

In my developer console (Chrome 12), I get the following values with these jQuery selectors:

$("body *").length
11
$("body *:not(.no-cufon)").length
10
$("body * li").length
6
$("body *:not(.no-cufon) li").length
6

For some reason the <li> tags under the no-cufon class are still being matched in my final jQuery selector.

So if that doesn't work--what will?

Upvotes: 0

Views: 2392

Answers (2)

Niklas
Niklas

Reputation: 30012

How about filter()? With the following it selects all li elements that don't have no-cufon parents.

Cufon.replace($('li').filter(function(){
    if ($(this).parents('.no-cufon').length == 0) return true;
}));

example: http://jsfiddle.net/niklasvh/prr4W/

Upvotes: 1

BoltClock
BoltClock

Reputation: 724332

body :not(.no-cufon) li is matching the same lis as body .no-cufon ul li, because the uls themselves are :not(.no-cufon).

Try this instead:

Cufon.replace('body > :not(.no-cufon) > li, body > :not(.no-cufon) > ul > li');

Upvotes: 1

Related Questions