Question

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

{% for i in accounts %}

  {% if i.follow.filter_by(user_id='1').first() %}
    DO SOMETHING
  {% endif %}

{% endfor %}

无论如何，我想将--------- | Red | Green | Blue --------的文字改为红色。但是，我不知道如何访问这个特定的孩子。我试过......

Red

然而，这会将所有这些变为红色。我显然没有正确使用$("#target :contains("Red")").children().css("color", "red");。

Answer 1

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

Answer 2

这会更改包含颜色的div的颜色。我无法看到你对你的HTML所做的事情，所以我无法告诉你你的代码是什么。

＆＃13;

<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>

＆＃13;

Answer 3

尝试使用css伪元素

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

<强> DEMO

jQuery解决方案

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

您需要引用包含特定文本的子div。

<强> DEMO Jquery

Answer 4

1）我猜您的代码的主要问题是您没有正确使用引用。请查看以下代码：

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

无法在带引号的另一个字符串中嵌入带引号的字符串。你应该使用撇号来逃避引号。

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

2）要考虑的第二件事是#target和:contains之间的空格。如果您的HTML看起来与此类似：

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

那么选择器中应该没有空格，即JS代码应该是：

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

但是如果您的HTML与此类似（请注意额外的div）：

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

然后在选择器中有空格，即：

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

找到具有特定文本的div的子项

4 个答案: