Question

我有这个大问题。在我的代码中有一些具有相同ID的元素（我知道这是不好的做法）所以我要做的是选择最后一个，使用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'这样的伪选择器。

如果您将选择更改为基于类，则可以。我建议你停止使用同一个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

使用带有id的jQuery的选择器将始终为您找到第一个找到的实例。

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

我们可以实现这一点，但不是推荐的方法。使用class代替您认为需要具有相同id的多个元素的位置。

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最后的选择器没有按预期工作

2 个答案: