为什么我的 jQuery 选择器没有返回任何元素？

Question

给出以下 HTML：

<table>     
    <tbody>     
        <tr data-week="0">
            <td class="timeSlot" data-day="0" data-timeslotid="0"></td>
            <td class="timeSlot" data-day="0" data-timeslotid="1"></td>
            <td class="timeSlot" data-day="0" data-timeslotid="2"></td>
            <td class="timeSlot" data-day="0" data-timeslotid="3"></td>
            <td class="timeSlot" data-day="0" data-timeslotid="4"></td>
            <td class="timeSlot" data-day="1" data-timeslotid="0"></td>
            <td class="timeSlot" data-day="1" data-timeslotid="1"></td>
            <td class="timeSlot" data-day="1" data-timeslotid="2"></td>
            <td class="timeSlot" data-day="1" data-timeslotid="3"></td>
            <td class="timeSlot" data-day="1" data-timeslotid="4"></td>
        </tr>
    </tbody>
</table>

和脚本：

$(document).ready(function() {

    var week = $("table tbody tr[data-week='0']");
    var dayTimeSlots = $(".timeSlot[data-day='0']", week);
    console.log($(dayTimeSlots).length);  // <-- Gives me 5
    var timeSlot = $("[data-timeslotid='1']", dayTimeSlots);
    console.log($(timeSlot).length);  // <-- Gives me 0??

    var temp = $("[data-timeslotid='1']", week);
    console.log($(temp).length);  // <-- gives me 2
});

为什么我不能从我的 jQuery 子集中获取这个单个元素？

这是一个简单的示例，但在我的代码中，我有大约 500,000 个 td 元素，出于性能原因，我需要将其过滤到尽可能窄的子集。

Fiddle: http://jsfiddle.net/wp36nLnw/4/

Answer 1

问题是因为您当前使用的上下文选择器：

var timeSlot = $("[data-timeslotid='1']", dayTimeSlots);

相当于使用find()。这意味着它正在寻找具有 data-timeslotid 属性的元素作为 dayTimeSlots 对象中那些元素的子元素。相反，您需要使用 filter() 来根据提供的选择器减少匹配集。试试这个：

var timeSlot = dayTimeSlots.filter("[data-timeslotid='1']");

Updated fiddle

为什么我的 jQuery 选择器没有返回任何元素？

Why is my jQuery selector not returning any elements?

jquery

jquery-selectors