jquery - 查找具有特定文本的 div 的子项

Question

我有一个盒子，一个div，里面有三个 child ，显示为三个不同的词...

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

无论如何，我想将 Red 的文本更改为红色。但是，我不知道如何访问这个特定的 child 。我试过了……

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

然而，这会将它们全部变为红色。我显然没有正确使用 contains。

Answer 1

如果您想使用 jQuery 做到这一点...那么您必须拆分单词并用一些 html 代码替换它...我尝试这样做...请检查以下 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);
  });
});