语法正确的jQuery selector返回空对象，变量已赋值该如何排查？

问题原因 #

你遇到的空返回问题核心来自两个CSS选择器的特性误区：

• nth-child 系列选择器的计数规则是从1开始，而非0开始：你的reihe变量取值为0、1、2，当传入0时本身就不存在对应索引的元素，必然返回空
• nth-child是匹配父元素下所有同级子元素的第N位，不会过滤标签类型：你提供的HTML结构里，span标签之间穿插了<br>节点，所有同级子节点的排序为：
  1. <span id="r1">
  2. <br>
  3. <span id="r2">
  4. <br>
  5. <span id="r3">
     所以当你传入reihe=1时，span:nth-child(1)能匹配到r1，但reihe=2时span:nth-child(2)对应的第2位节点是<br>，不符合span标签要求，自然匹配不到元素。

解决方法 #

如果你的需求是匹配索引0/1/2对应的三个span标签，改用按标签计数的nth-of-type选择器，同时把reihe的值加1适配计数规则即可：

// reihe 取值0/1/2，加1后对应第1/2/3个span标签
var mycell = $('span:nth-of-type(' + (reihe + 1) + ')');

如果你实际需要取的是对应span下的子div元素，可以在后面补充子级选择器，比如要取span下的第N个droppable节点，同样遵循计数从1开始的规则调整即可。

内容的提问来源于stack exchange，提问作者Swordswoman69