Trying to use contains selector within nested divs

Question

<div>
    <div>test</div>
</div>

$("div:contains('test')").css('display','none');

I know I am going to kick myself on this. The problem is that when this runs all divs are hidden due to nesting. How do I make it so that the parent div does not get hidden? I am limited to using 1.2.6

Answer 1

$("div:contains('test'):not(:has(div))").hide();

Answer 2

If you want an elegant solution, define a new selector. Unfortunately, :empty is not sufficient as anything with text node children isn't empty.

$.extend($.expr[':'], {
  leaf: function(elem, i, match) {
    return $(elem).children().length == 0;
  }
});

And then you can do:

$("div:leaf:contains('test')").hide();