jQuery - Select element with specific 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.

prasanth · Accepted Answer · 2017-06-28 11:57:17Z

4

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>

answered Jun 28, 2017 at 11:57

prasanth

22.6k4 gold badges33 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Black Over a year ago

Great, this works without using ID's like requested. Thx!

teo van kot · Accepted Answer · 2017-06-28 11:57:27Z

2

In your exable should be different selector:

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

answered Jun 28, 2017 at 11:57

teo van kot

12.5k10 gold badges40 silver badges73 bronze badges

Comments

silentw · Accepted Answer · 2017-06-28 12:06:46Z

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>

edited Jun 28, 2017 at 12:06

answered Jun 28, 2017 at 11:56

silentw

4,8854 gold badges27 silver badges45 bronze badges

3 Comments

silentw Over a year ago

@Black Updated answer

Black Over a year ago

Great job! Good solution

silentw Over a year ago

Instead of the div selector alone, you could narrow the selector to your original div:contains('heinrich')

Amir Shahbabaie · Accepted Answer · 2017-06-28 11:57:08Z

1

This should do

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

answered Jun 28, 2017 at 11:57

Amir Shahbabaie

1,4222 gold badges16 silver badges35 bronze badges

Comments

Gokulan P H · Accepted Answer · 2017-06-28 12:07:18Z

0

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/

answered Jun 28, 2017 at 12:07

Gokulan P H

1,9161 gold badge12 silver badges13 bronze badges

Comments

Confused · Accepted Answer · 2017-06-28 12:07:38Z

0

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");
        }
    });
});

answered Jun 28, 2017 at 12:07

Confused

1,66215 silver badges27 bronze badges

Comments

M. Hanafi · Accepted Answer · 2017-06-28 12:11:49Z

0

try this it will work

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

answered Jun 28, 2017 at 12:11

M. Hanafi

661 silver badge11 bronze badges

Collectives™ on Stack Overflow

jQuery - Select element with specific html

7 Answers 7

1 Comment

Comments

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

Comments

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related