Question

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?

Answer 1

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/