JQuery 最后一个选择器没有按预期工作
Posted
技术标签:
【中文标题】JQuery 最后一个选择器没有按预期工作【英文标题】：JQuery last selectors not working as expected 【发布时间】：2018-11-24 19:09:12 【问题描述】：我有这个大概率。在我的代码中有具有相同 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>我总是以第一个元素结束？有可能这样做吗？请有人帮忙。
【问题讨论】：
【参考方案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>【讨论】：
【参考方案2】：使用 jQuery 和 id 的选择器将始终为您找到找到的第一个实例。
您可以改为使用原生 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 最后一个选择器没有按预期工作的主要内容，如果未能解决你的问题，请参考以下文章