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

Answer 1

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

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

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

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

Updated fiddle

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

1 个答案: