CODEWITHSUNDEEP
jquerycss
buydadip
buydadip

Reputation: 9417

Find child of div with particular text

I have a box, a div, and inside there are three children, displayed as three different words...

---------
|  Red
|  Green
|  Blue
--------

Anyways, I want change the text of Red to the color red. However, I do not know how to access this particular child. I tried...

$("#target :contains("Red")").children().css("color", "red");

However this changes all of them to red. I am clearly not using contains properly.

Upvotes: 0

Views: 401

Answers (4)

RRR
RRR

Reputation: 1084

If you wanna do that using jQuery... then you have to split the words and replace it with some html code... I tried to do that... Kindly check the following fiddle https://jsfiddle.net/4865dwxf/1/

HTML

<div id="target" style=" width: 155px; height: 150px; float: left; border: 1px solid rgb(119, 119, 119); margin: 10px; padding: 5px; background: rgb(204, 204, 204);">#target
  <br>
  <br>
  <span>
    red
    <br>
    blue
    <br>
    green
  </span>
</div>

<br>
<button class="change">
  Change
</button>

JQUERY

$(document).ready(function() {
  $('.change').on('click', function() {
    var str = $('#target span').html();
    console.log(str);
    var words = str.split("<br>");
    var clr = ['red', 'blue', 'green'];
    var n = '';
    console.log(words);
    for (var i = 0; i <= words.length - 1; i++) {
      words[i] += " ";
      var m = words[i].replace(clr[i], '<br><span style=\'color:' + clr[i] + '\'>' + clr[i] + '</span>')
      n += m;

    }

    $('#target').children().remove();
    $('#target').append('<br>' + n);
  });
});

Upvotes: 2

Michael Cornetto
Michael Cornetto

Reputation: 64

This changes the color of the divs that contain the colors. I can't see what you did with your html so I can't tell you what's up with your code. 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div>Red</div>
  <div>Green</div>
  <div>Blue</div>
</div>

<script>
  $('div:contains("Red")').css('color', 'red');
  $('div:contains("Green")').css('color', 'green');
  $('div:contains("Blue")').css('color', 'blue');
</script>

Upvotes: 1

Anton
Anton

Reputation: 2636

1) I guess the main problem with your code is that you do not use the quotations properly. Look at the following piece of your code:

$("#target :contains("Red")")

It is not possible to nest a string with quotation marks inside of another string surrounded by quotation marks. You should either use apostrophes are escape the quotation marks.

$("#target :contains('Red')")

2) The second thing to consider is the space between #target and :contains. If your HTML looks similar to this:

<div id="target">
    Red
    <span>This text will be read.</span>
    <span>This text will be read.</span>
</div>

then there should be no space in the selector, i.e. the JS code should be:

$("#target:contains('Red')").children().css("color", "red");

But if your HTML is similar to this one (notice the extra div):

<div id="target">
    <div>
      Red
      <span>This text will be read.</span>
      <span>This text will be read.</span>
    </div>
</div>

then it is fine to have the space in the selector, i.e.:

$("#target :contains('Red')").children().css("color", "red");

Upvotes: 1

Sowmya
Sowmya

Reputation: 26969

Try css pseudo elements

#target > div:nth-child(1){color:red}
#target > div:nth-child(2){color:green}
#target > div:nth-child(3){color:blue}

DEMO

jQuery solution

$( "#target div:contains('Red')" ).css( "color", "red" );

You need to refer the child div which contains the specific text.

DEMO Jquery

Upvotes: 1

Related Questions