JQuery 最后一个选择器没有按预期工作

Question

我有这个大概率。在我的代码中有一些具有相同 ID 的元素（我知道这是不好的做法）所以我要做的是 select 最后一个，使用 jquery，元素应用一些 css.按照逻辑，这应该是有效的。下面是代码

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

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

</body>
</html>

我总是以拳头元素结束？有可能这样做吗？请有人帮忙。

Answer 1

ID 在 html 文档中是唯一的。我没有研究为什么这个特殊情况不适用于 jQuery，但我会以同样的方式编写框架。如果一个 id 只能有一个实例，那么就没有理由实现像 'first' 或 'last' 这样的伪选择器。

如果您将选择更改为基于 class，它会起作用。我建议您停止使用同一 ID 的多个实例。

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

<p class="i">This is the first paragraph.</p>
<p class="i">This is the second paragraph.</p>
<p class="i">This is the last paragraph.</p>

</body>
</html>

Answer 2

使用 jQuery 和 id 的选择器总是会找到第一个找到的实例。

您可以使用原生 querySelectorAll 获取所有元素，然后使用 :last psuedoElement 选择器。

我们可以让这个工作，但不是推荐的方法。在您认为需要具有相同 id.

的多个元素的地方使用 class

var domElements = document.querySelectorAll('#i');
var jQueryElements = $.makeArray(domElements);

var lastWithId = $(jQueryElements).filter(':last');

lastWithId.addClass('found');

.found {
   border: 1px solid red;
   padding: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id = "i">This is the first paragraph.</p>
<p id = "i">This is the second paragraph.</p>
<p id = "i">This is the last paragraph.</p>

JQuery 最后一个选择器没有按预期工作

JQuery last selectors not working as expected

javascript

jquery

dom

jquery-selectors