Clever Geek Handbook

JQuery - select element with specific html

I am trying to select a div that has specific html. Take a 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>
Run codeHide result


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

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

+3


source to share


7 replies


Better to mention 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>
Run codeHide result


+4


source


Just change your root selector.

UPDATE

Pick each one div

and use the filtering method .

Open div

which one you are filtering, select all the children (nested divs), remove them, then "go back" to the parent cloned div

and extract the text.



Once you have the text, compare the content with the text you are looking for.

$("#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>
Run codeHide result


+2


source


Your instance should have a different selector:

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


source


This should do

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


source


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

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

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

0


source


try it

$("#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");
        }
    });
});
0


source


try this it will work

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


source






More articles:


All Articles