Question

I have this HTML and I’m trying to return false on click if the element contains specific text.

This is my HTML:

<ul>
    <li id="1"></li>
    <li id="2"></li>
    <li id="3"></li>
    <li id="4"></li>
    <li id="5"></li>
    <li id="6">text</li>
    <li id="7"></li>
</ul>

Javascript:

$("ul").on('click', 'li', function (e) {
    var value = $(this).attr('id');
    if ("#" + value + ":contains(\"text\")"){  // Something similar to this
        return false;
    };
    alert('test');
});

How can I return false, if the element contains the word ‘text’.

Example: http://jsfiddle.net/wSvLD/ (this returns false on everything)

Answer 1

You’ll need to escape those quotes in contains(“text”)

Or use single quotes in combination with double quotes….

Also, the value var should be inside the event function.

EDITS:

$("li").click(function (e) {

    var value = $(this).attr('id');

    if ( $('#' + value + ':contains("text")').length != 0 ){ 
        return false;
    }

    alert('test');

});

:contains returns a jQuery object, so you need to check the length of the object to see if it contains a match.

http://jsfiddle.net/8NuvP/