Find html element by content and hide using jQuery

问题:

I am trying to use jquery to find some elements in some HTML, I would like to find and hide the list id that contains the label text 'This is my test label' and 'Yest another test label

<ul id="mylist" class="top_level_list">
<li id="field66" class="myfield">
    <div class="field_icons">
        <div class="title">This is my title</div>
    </div>
    <label class="my_label" for="input71">This is my test label</label>
</li>
<li id="field20" class="myfield">
    <div class="field_icons">
        <div class="title">This another test title</div>
    </div>
    <label class="my_label" for="input71">Yet another test label</label>
</li>

I have found the jQuery .hide function as well as the .find() function but i'm unsure as to how to select the element using the content within it.

Can anyone help?

回答1:

This is a slightly easier solution. $(".my_label:contains('This is my test label')").hide();. You can see it in action here: http://jsfiddle.net/kPxTw/

回答2:

Have a look here: http://jsfiddle.net/yPFgu/1/

CODE

var labelsToHide = ["This is my test label", "Another one"];

$("li").each(function () {
    var txt = $(this).find("label").text();
    if (labelsToHide.indexOf(txt) > -1 )
        $(this).hide();
});

Hope it helps.

回答3:

I have, in my personnal files, a prototype that does what you want. I can share it with you. Just add this in somehwere in your document before calling the code :

$.fn.filterText = function(text, caseSensitive){
    var returnedObj = $(),
        caseSensitive = caseSensitive || false,
        $this = $(this);
    if(typeof text == 'object'){
        for(var i = 0; i < text.length; i++){
            if(typeof text[i] == 'string'){
                console.log(i);
                returnedObj = returnedObj.add($this.filter(function(){
                    var search = caseSensitive ? text[i] : new RegExp(text[i], 'i')
                    return $(this).text().search(search) != -1;
                }))

            }
        }
    }else if(typeof text == 'string'){
        returnedObj = returnedObj.add($this.filter(function(){
            var search = caseSensitive ? text : new RegExp(text, 'i')
            return $(this).text().search(search) != -1;
        }))
    }
    return returnedObj;
}

Then, you'll be able to hide parent with that line :

$('label').filterText(['This is my test label', 'Yet another test label'], true /*case sensitive?*/)
          .parent()
          .hide()

Fiddle : http://jsfiddle.net/yKprx/

Maybe just add in a comment before the $.fn //Author @Karl-André Gagnon :)

回答4:

You can select them like this:

$('.title').each(function() {
    if (($(this).text() == 'This is my test label') || ($(this).text() == 'Yet another test label')) {
      $(this).hide();
    }
});

回答5:

Tim Wasson's answer is great - I found that pairing his solution with the .closest() method makes it really easy to hide a whole parent container. I used his solution to find a certain link "Promotions", and then kill the whole section that was holding it and the button styling, etc:

$("a:contains('Promotions')").closest('section').hide();

Might be useful!

回答6:

Adding window.onload is useful when you are hiding elements on page load.

<li>Your Text</li>

window.onload = function() {
    jQuery("li:contains('Your Text')").hide();
}

If you have, link element (<a>) inside <li> element, then you can use the following code to hide the text inside the <a> element:

<li><a href="yourLink">Your Text</a></li>

window.onload = function() {
    jQuery("li a:contains('Your Text')").hide();
}