Question

我正在尝试根据联系人<p>更改innerHTML背景，但我无法让它工作。

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        if ($("p").innerHTML === "just a test"){
            $("p").css("background","yellow");
        }
    });
});
</script>
</head>
<body>

<p>just a test number1</p>
<p>just a test number2</p>
<p>just a test</p>

<button>Execute</button>

</body>

我预计只会改变最后的<p>背景，但没有任何反应，为什么会这样？

Answer 1

jQuery对象上没有innerHTML属性，因此$("p").innerHTML === "just a test"始终为false。

您可以使用.html()代替，但这将始终返回与选择器匹配的 first 元素中的数据，因此它仍然始终为false。

即使不是这种情况，$("p").css("background","yellow");也会设置所有段落的背景。

您需要循环遍历所有元素并依次测试每个元素。

$(document).ready(function() {
  $("button").click(function() {
    $("p").each(function(index, paragraph) {
      var $p = $(paragraph);
      if ($p.html() === "just a test") {
        $p.css("background", "yellow");
      }
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>just a test number1</p>
<p>just a test number2</p>
<p>just a test</p>

<button>Execute</button>

Answer 2

InnerHtml是一个JavaScript属性，它不属于jQuery。

你需要改变这个：

 $("p").innerHTML === "just a test"

到此：

 $("p").html() === "just a test"

其次，选择器p非常大，特别是你不是从任何元素中调用它，而是在全局范围内。如果可能的话，我会建议使用某种类或id。

第三，我会对你的算法进行修复：

$("p").each(function(){
   var el = $(this);
   if(el.htlm() === 'just a test'){ // could change for regexp (bevare of white characters)
      el.css("background","yellow")
   }
});

对于内部html的每个p元素，这种方式只是一个测试＆＃39;你会改变背景颜色。

innerHTML与JQuery的比较

2 个答案: