How to check if an element contains another element in jQuery

Question

I am using xVal combind with the jquery.validate plugin, but have come across a slight problem in that it is posting validation messages twice in a certain instance. I think this bug should be fairly easily fixed with some clever jQuery in the placement of the error message.

I am trying to find a way to see if a ul already contains an li with some text in it.

errorPlacement: function(error, element) {
     $("ul.errors:not(:contains(" + error + "))").append(error);
}

I thought something like the above may work, but not such luck. error.toString() does not work either.

Any help would be greatly appreciated.

Answer 1

Not having that plugin here, I can't tell what the appropriate property is to get the error text, but you can use Firebug to do a console.log of error and see what it is.

You'll also need to put quotes around the string.

$("ul.errors:not(:contains('" + errorString + "'))")

...and don't forget to escape for any single quotes in the error message!

Answer 2

Give a look to the :has selector:

$("ul:has(li:contains('" + error + "'))")

The above selector will select the UL elements which have a LI element that contains the error text.

Answer 3

What is error in your code?
First you refer to it as a string :contains(" + error + "), but then you refer to it as an element - .append(error);.
If this is an element, try getting its text by using $(error).text(), and search for the text in the ul.