在jquery中设置特定文本的背景颜色

时间：2016-08-23 10:09:34

标签： javascript jquery html css 

    <!DOCTYPE html>
    <html>

        <head>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
       <script>
        $(document).ready(function(){
            $("#something:contains(yellow)").css("background-color", "yellow");
        });
       </script>
        </head>


        <body>
            <div id="something">

            Color it with yellow
                <div>
                    Nothing to do with it
                </div>
            </div>
        </body>
    </html>

我想将背景颜色设置为仅黄色＆＃34;将颜色设置为黄色＆＃34;文字不是＆＃34;与它无关＆＃34;但我的代码对整个div做了因为id包含请建议如何在我的文本中设置颜色＆＃34;用黄色＆＃34;

5 个答案:

答案 0 :(得分：2)

使用nodeType===3为您提供div文本，wrap()将其设为黄色

$(document).ready(function(){
    $('#something').contents().filter(function () {
         return this.nodeType === 3;
    }).wrap('<span class="yellow">');
});
.yellow{background-color:yellow}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="something">
  Color it with yellow
  <div>
    Nothing to do with it
  </div>
</div>

答案 1 :(得分：0)

$(document).ready(function(){
      $("#something:contains(yellow)").css("background-color", "yellow");
     });
<!DOCTYPE html>
    <html>
    <head>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">     </script>
    
    </head>
    <body>
    <div class="container">
      <div id="something">
        Color it with yellow
      </div>
  
      <div>
        Nothing to do with it
      </div>
    </div>
    
    </body>
    </html>

您必须

答案 2 :(得分：0)

将所有内容包裹在＆＃39;＆lt; p＆gt;＆＃39;标记。并使用以下代码。它会检查黄色文本，然后根据您的要求对其应用css。 

   function hexc(colorval) {
        var parts = colorval.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
        delete(parts[0]);
        for (var i = 1; i <= 3; ++i) {
            parts[i] = parseInt(parts[i]).toString(16);
            if (parts[i].length == 1) parts[i] = '0' + parts[i];
        }
        color = '#' + parts.join('');

        return color;
    }
    var checkcolor = hexc($('p').css("color") );
    if( checkcolor == '#ffff00' ){
        $('p').css("background-color", "yellow");
    }

答案 3 :(得分：0)

尝试以下代码：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("p:contains(yellow)").css("background-color", "yellow");
});
</script>
</head>
<body>

<div id="something">

    <p>Color it with yellow </p>

  <p>
    Nothing to do with it
  </p>

</div>

</body>
</html>

使用<div></div>删除了<p></p>，或者您可以将div替换为其他ID。

$("#anotherId:contains(yellow)").css("background-color", "yellow");

答案 4 :(得分：0)

所以设置其他颜色不是id div div 

 $("div:contains(yellow)").css("background-color", "yellow");
 $("div:not(#something)").css("background-color", "#fff");
相关问题
最新问题