jQuery - 选择具有特定html的元素

Question

I try to select a div which has a specific html. Look at my example:

 $("#clickMe").click(function(){ $("div:contains('heinrich')").css("background-color", "limegreen") }); 

 .normal { width: 100px; height: 100px; display: inline-block; } .red { background-color: red; border: 1px solid black; } .blue { background-color: blue; border: 1px solid black; } .yellow { background-color: yellow; border: 1px solid black; } #masterdiv { border: 10px solid gray; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="masterdiv"> My favorite frends are: <div class="red normal" id="div1"> hans </div> <div class="blue normal" id="div2"> franz </div> <div class="yellow normal" id="div3"> heinrich </div> </div> <button id="clickMe"> Clicking me should make only heinrichs div limegreen </button> 

jsFiddle: https://jsfiddle.net/fj1brnv8/2/

However, the parent div's color also changes. Is there a way to only select the element itself, I am not allowed to use ID's.

Answer 1

Better mention the className in the selector $("div .normal:contains('heinrich')")

 $("#clickMe").click(function(){ $("div .normal:contains('heinrich')").css("background-color", "limegreen") }); 

 .normal { width: 100px; height: 100px; display: inline-block; } .red { background-color: red; border: 1px solid black; } .blue { background-color: blue; border: 1px solid black; } .yellow { background-color: yellow; border: 1px solid black; } #masterdiv { border: 10px solid gray; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="masterdiv"> My favorite frends are: <div class="red normal" id="div1"> hans </div> <div class="blue normal" id="div2"> franz </div> <div class="yellow normal" id="div3"> heinrich </div> </div> <button id="clickMe"> Clicking me should make only heinrichs div limegreen </button> 

Answer 2

Just change the root selector.

UPDATE

Select every div and use the filter method .

Clone the div you're filtering, select all the children (nested divs), remove them then "come back" to the parent cloned div and retrieve the text.

Having the text, compare the contents with the text you're searching.

 $("#clickMe").click(function(){ $("div").filter(function(idx, val) { return /heinrich/gi.test($(this).clone().children().remove().end().text()); }).css("background-color", "limegreen") }); 

 .normal { width: 100px; height: 100px; display: inline-block; } .red { background-color: red; border: 1px solid black; } .blue { background-color: blue; border: 1px solid black; } .yellow { background-color: yellow; border: 1px solid black; } #masterdiv { border: 10px solid gray; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="masterdiv"> My favorite frends are: <div class="red normal" id="div1"> hans </div> <div class="blue normal" id="div2"> franz </div> <div class="yellow normal" id="div3"> heinrich </div> </div> <button id="clickMe"> Clicking me should make only heinrichs div limegreen </button> 

Answer 3

在你的exable应该是不同的选择器：

$("#masterdiv > div:contains('heinrich')")

Answer 4

This should do

    $("#clickMe").click(function(){ 
$("#masterdiv  div:contains('heinrich')").css("background-color", "limegreen")
 });

Answer 5

Since you didn't want to use ids I can suggest you to try this.

   $('div > div:contains(heinrich)').css("background-color", "limegreen")

Working Fiddle: https://jsfiddle.net/g50cfqzw/

Answer 6

Try this

$("#clickMe").click(function(){
        var html_trg="heinrich";
    $('.normal').each(function(i,u){
            var divtxt=$(u).html();
        divtxt=$.trim(divtxt);
            if(divtxt==html_trg){
          $(u).css("background-color", "limegreen");
        }
    });
});

Answer 7

try this it will work

  $("#clickMe").click(function(){
        $("div#masterdiv").find('div.normal:contains(heinrich)').css("background-color", "limegreen")
    });