为什么jQuery：第一个选择器不能在这里工作？

Question

为什么选择组中第一个元素的以下代码无效：

＆＃13;

＆＃13;

$(document).ready(function() {
  $("#btn").click(function() {
    $("ul li:first").css("border", "1px solid red");
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>First Item</li>
  <li>Second Item</li>
  <li>Third Item</li>
</ul>
<ul>
  <li>First Item</li>
  <li>Second Item</li>
  <li>Third Item</li>
</ul>
<input type="button" id="btn" value="Click Me" />

＆＃13;

＆＃13;

＆＃13;

但是如果我们尝试选择组中的最后一个元素，那么下面的代码就可以了：

＆＃13;

＆＃13;

$(document).ready(function(){
    $("#btn").click(function(){
        $("ul li:last").css("border", "1px solid red");
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li>First Item</li>
    <li>Second Item</li>
    <li>Third Item</li>
</ul>
<ul>
    <li>First Item</li>
    <li>Second Item</li>
    <li>Third Item</li>
</ul>
<input type="button" id="btn" value="Click Me" />

＆＃13;

＆＃13;

＆＃13;

任何想法为什么：第一次不工作时：最后工作？

修改

对不起，没有人能够准确回答我遇到的真正问题。我刚刚通过firebug注意到我的源代码中有一些我从未写过的奇怪的HTML。这个不必要的代码导致问题：首先。谁能告诉我怎么了？

Answer 1

编辑：就像我说你应该为你的ul元素定义一个类，我确定一些框架或任何浏览器插件都可以添加不必要的元素。我想你在ul元素之前创建的东西。只需给你的ul元素一个类似我编辑的类。

我可能认为你想要从第一个ul中选择最后一个元素，否则它会起作用。通过添加ul：首先它将选择第一个ul组。如果要指定要使用的组，请为ul元素指定一个类，并将选择器写为： classXYZ li：last

$(document).ready(function(){
    $("#btn").click(function(){
        $(".ulgroup li:first").css("border", "1px solid red");
    });
    $("#btn2").click(function(){
        $(".ulgroup li:last").css("border", "1px solid red");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul> 
    <li> unecessary Element from somewhere </li>
</ul>
<ul class="ulgroup">
    <li>First Item</li>
    <li>Second Item</li>
    <li>Third Item</li>
</ul>
<ul class="ulgroup">
    <li>First Item</li>
    <li>Second Item</li>
    <li>Third Item</li>
</ul>
<ul> 
    <li> unecessary Element from somewhere </li>
</ul>
<input type="button" id="btn" value="First" />
<input type="button" id="btn2" value="Last" />

Answer 2

假设您要选择第一个<ul>（整个第三个<li>元素）中的最后一个元素，您可以将两个伪选择器链接为$("ul:first li:last")：

$(document).ready(function() {
  $("#btn").click(function() {
    $("ul:first li:last").css("border", "1px solid red");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>First Item</li>
  <li>Second Item</li>
  <li>Third Item</li>
</ul>

<ul>
  <li>First Item</li>
  <li>Second Item</li>
  <li>Third Item</li>
</ul>

<input type="button" id="btn" value="Click Me" />

希望这有帮助！ ：）

Answer 3

尝试使用first-child选择组的第一个元素。

$（“ul li：first-child”）。css（“border”，“1px solid red”）;