Question

这个页面有两个有序列表，我试图从两个列表中选择eigth li元素。为此，我使用以下查询：

$('ol > li').eq(7).css('border-bottom','2px solid black');

但是此查询从第一个列表中选择li。为什么会这样？

<!doctype html>
<html>
<body>
<br><h1>3.2 Reducing the Selection Set to a Specified Item</h1><br>
<h2>Eastern Conference</h2>
<ol id="east">
<li>Boston Bruins</li>
<li>Washington Capitals</li>
<li>New Jersey Devils</li>
<li>Pittsburgh Penguins</li>
<li>Philadelphia Flyers</li>
<li>Carolina Hurricanes</li>
<li>New York Rangers</li>
<li>Montreal Canadians</li>
<li>Florida Panthers</li>
</ol>
<h2>Western Conference</h2>
<ol id="west">
<li>San Jose Sharks</li>
<li>Detroit Red Wings</li>
<li>Vancouver Canucks</li>
<li>Chicago Blackhawks</li>
<li>Calgary Flames</li>
<li>St. Louis Blues</li>
<li>Columbus Blue Jackets</li>
<li>Anaheim Ducks</li>
<li>Minnesota Wid</li>
<li>Nashville Predators</li>
</ol>
<script src='jquery.js'></script>
<script>
$('ol > li').eq(7).css('border-bottom','2px solid black');
</script>
</body>
</html>

Answer 1

您可以使用each()功能

$('ol').each(function(){
 $(this).find("li").eq(7).css('border-bottom','2px solid black');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br><h1>3.2 Reducing the Selection Set to a Specified Item</h1><br>
<h2>Eastern Conference</h2>
<ol id="east">
<li>Boston Bruins</li>
<li>Washington Capitals</li>
<li>New Jersey Devils</li>
<li>Pittsburgh Penguins</li>
<li>Philadelphia Flyers</li>
<li>Carolina Hurricanes</li>
<li>New York Rangers</li>
<li>Montreal Canadians</li>
<li>Florida Panthers</li>
</ol>
<h2>Western Conference</h2>
<ol id="west">
<li>San Jose Sharks</li>
<li>Detroit Red Wings</li>
<li>Vancouver Canucks</li>
<li>Chicago Blackhawks</li>
<li>Calgary Flames</li>
<li>St. Louis Blues</li>
<li>Columbus Blue Jackets</li>
<li>Anaheim Ducks</li>
<li>Minnesota Wid</li>
<li>Nashville Predators</li>
</ol>

Answer 2

您的jquery所做的是收集来自所有<li>的所有<ol>，然后应用.eq()选择器。所以基本上有一个数组，其中存在来自所有<li>的所有<ol>，并且从中选择第7个。{所以它看起来只适用于<li>来自<ol>而不是后来的.each()。

@ P.Frank的答案通过使用float dpi = Toolkit.getDefaultToolkit().getScreenResolution();选择器来解决您的查询

Answer 3

正如.eq() documentation：

中所述

给定一个表示一组DOM元素的jQuery对象，.eq()方法从该集合中的一个元素构造一个新的jQuery对象。提供的索引标识该元素在该集合中的位置。

因此，在您的情况下，$('ol > li')首先在文档中的任何位置选择作为ol元素的子元素的所有li元素，然后.eq(7)选择其中的第八个元素。 .eq()并不知道或关心这些元素最初是如何选择的，或者它们是否彼此有任何关系。（如果您碰巧有三个ol元素，每个元素都有三个li元素，那么$('ol > li').eq(7)将选择第三个ol的第二个li元素。）

解决问题的一种方法是使用:nth-child() selector代替.eq()，而＆＃34; [s]选择所有与其父级的第n个孩子相关的元素＆＃34} ; 。请注意，与.eq()不同，:nth-child()使用的索引从1开始，而不是0。

$('ol > li:nth-child(8)').css('border-bottom','2px solid black');

展开并运行以下代码段以查看其是否有效：

＆＃13;

$('ol > li:nth-child(8)').css('border-bottom','2px solid black');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<br><h1>3.2 Reducing the Selection Set to a Specified Item</h1><br>
<h2>Eastern Conference</h2>
<ol id="east">
<li>Boston Bruins</li>
<li>Washington Capitals</li>
<li>New Jersey Devils</li>
<li>Pittsburgh Penguins</li>
<li>Philadelphia Flyers</li>
<li>Carolina Hurricanes</li>
<li>New York Rangers</li>
<li>Montreal Canadians</li>
<li>Florida Panthers</li>
</ol>
<h2>Western Conference</h2>
<ol id="west">
<li>San Jose Sharks</li>
<li>Detroit Red Wings</li>
<li>Vancouver Canucks</li>
<li>Chicago Blackhawks</li>
<li>Calgary Flames</li>
<li>St. Louis Blues</li>
<li>Columbus Blue Jackets</li>
<li>Anaheim Ducks</li>
<li>Minnesota Wid</li>
<li>Nashville Predators</li>
</ol>

＆＃13;

选择查询仅选择第一个li元素

3 个答案: