Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery - Select element with specific html

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.

like image 517
Black Avatar asked Mar 23 '26 08:03

Black


1 Answers

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>
like image 135
prasanth Avatar answered Mar 24 '26 21:03

prasanth



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!