Question

概述：

在下面的代码中，我应该突出显示最后一个id =“sample”的html元素，即“This is the last paragraph”。但是，“这是第一段”会突出显示。

问题：

1）为什么$（“＃sample：last”）。css（“background-color”，“yellow”）没有突出显示最后一段？

2）当我改为$（“p＃sample：last”）。css（“background-color”，“yellow”）时，最后一段突出显示。为什么这样做而不是问题1的情景？

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

      <p id="sample">This is the first paragraph.</p>
      <p id="sample">This is the second paragraph.</p>
      <p id="sample">This is the last paragraph.</p>

    </body>
  </html>

Answer 1

问题在于您使用的是id而不是类。您只能使用一次ID。正确的做法是给他们所有相同的类，并使用类{/ 1}}与e.currentTarget结合使用。

clickButton.addEventListener("click", (e) => {
  e.currentTarget.classList.toggle("modified");
}, false);

http://jsfiddle.net/gt4L7zt2/

Answer 2

因为你使用了重复的ID。有效标记剂量不允许重复ID。 Id在单个DOM结构中应该是唯一的，这就是为什么没有：最后一个伪类可用于ID选择器的原因。在这种情况下，您应该使用class而不是ID。

为什么jQuery的last（）不能处理最后一次出现的HTML元素？

2 个答案: