jQuery 语法正确的选择器只会显示空对象

Question

大家晚上好。一个 jQuery 正确的选择器 returns 一个空对象。变量都已定义并具有值（我 console.log 它们）但我总是得到一个空对象。我错过了什么？

这里是有问题的代码。发布所有代码是多余的。

// reihe is 0, 1, or 2
var mycell = $('span:nth-child(' + reihe + ')');

上面的选择器returns控制台中的这个：

Object { length: 0, prevObject: {…} }

有问题的 HTML 是...


<span align="center" id="r1">
<div class="target droppable" data-droppable="true"></div>
<div class="target droppable" data-droppable="true"></div>
<div class="target droppable" data-droppable="true"></div>
</span>
<br>
<span align="center" id="r2">
<div class="target droppable" data-droppable="true"></div>
<div class="target droppable" data-droppable="true"></div>
<div class="target droppable" data-droppable="true"></div>
</span>
<br>
<span align="center" id="r3">
<div class="target droppable" data-droppable="true"></div>
<div class="target droppable" data-droppable="true"></div>
<div class="target droppable" data-droppable="true"></div>
</span>

当然，jQuery 已加载。

Answer 1

您使用 :nth-child（但不在语法中）发出 is。

鉴于提供的 HTML，您的 3 倍跨度是

:nth-child(1)
:nth-child(3)
:nth-child(5)

来自 nth-child-selector

Because jQuery's implementation of :nth- selectors is strictly derived from the CSS specification, the value of n is "1-indexed", meaning that the counting starts at 1

所以“第一个”是 :nth-child(1)。

不过:nth-child(2)是第一个<br/>

所以你的“第二个”跨度是 :nth-child(3) 并且 (4)(br) 和第三个跨度 (5) 相同。

var reihe = 1;
$('span:nth-child(' + reihe + ')').css("color", "red");

reihe = 3;
$('span:nth-child(' + reihe + ')').css("color", "blue");

reihe = 5;
$('span:nth-child(' + reihe + ')').css("color", "cyan");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>

<span align="center" id="r1">
<div class="target droppable" data-droppable="true">x</div>
<div class="target droppable" data-droppable="true">x</div>
<div class="target droppable" data-droppable="true">x</div>
</span>
<br>
<span align="center" id="r2">
<div class="target droppable" data-droppable="true">y</div>
<div class="target droppable" data-droppable="true">y</div>
<div class="target droppable" data-droppable="true">y</div>
</span>
<br>
<span align="center" id="r3">
<div class="target droppable" data-droppable="true">z</div>
<div class="target droppable" data-droppable="true">z</div>
<div class="target droppable" data-droppable="true">z</div>
</span>

</div>

:nth-child(0) 得到空 jquery 对象的原因是它们从 1 开始。

您还会为 span:nth-child(2) 获得一个空的 jquery 对象，因为 :nth-child(2) 不是跨度。

使用 span:nth-child(2) 与 $(":nth-child(2)").filter("span")

相同

Answer 2

考虑改用 .eq()。

$(function() {
  var reihe = 0;
  var myCell = $('span').eq(reihe);
  console.log(myCell.attr("id"));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span align="center" id="r1">
<div class="target droppable" data-droppable="true"></div>
<div class="target droppable" data-droppable="true"></div>
<div class="target droppable" data-droppable="true"></div>
</span>
<br>
<span align="center" id="r2">
<div class="target droppable" data-droppable="true"></div>
<div class="target droppable" data-droppable="true"></div>
<div class="target droppable" data-droppable="true"></div>
</span>
<br>
<span align="center" id="r3">
<div class="target droppable" data-droppable="true"></div>
<div class="target droppable" data-droppable="true"></div>
<div class="target droppable" data-droppable="true"></div>
</span>

此外，由于每个都使用一个 ID，因此您也可以在选择器中使用该 ID。

$(function() {
  var reihe = 1;
  var myCell = $('span[id="r' + reihe + '"]');
  console.log(myCell.attr("id"));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span align="center" id="r1">
<div class="target droppable" data-droppable="true"></div>
<div class="target droppable" data-droppable="true"></div>
<div class="target droppable" data-droppable="true"></div>
</span>
<br>
<span align="center" id="r2">
<div class="target droppable" data-droppable="true"></div>
<div class="target droppable" data-droppable="true"></div>
<div class="target droppable" data-droppable="true"></div>
</span>
<br>
<span align="center" id="r3">
<div class="target droppable" data-droppable="true"></div>
<div class="target droppable" data-droppable="true"></div>
<div class="target droppable" data-droppable="true"></div>
</span>

jQuery 语法正确的选择器只会显示空对象

jQuery selector that is syntactically correct only brings up empty object

jquery

selector