jQuery 数据选择器找不到存在的元素

Question

我有调度程序 table，其中包含代表天数的 div。每天都有数据属性日期，格式为：

$('#scheduler-table > div.row > div:nth-child(4) > div').data()
{date: "8.09.2017", day: 3}

从开发者工具复制的直接选择器。

但是当我尝试使用带有数据属性的选择器时：

$('#scheduler-table').find("[data-date='8.09.2017']").data();

它没有找到任何东西。我的选择器有什么问题？

Answer 1

我假设您只想从特定元素中检索 data-date 的值？

$('#scheduler-table').each(
var mydate = $('#scheduler-table > div.row > div:nth-child(4) > div').attr('data-date')

console.log(mydate);

编辑后的答案：

function SearchByDate(myDate){
    var mySelectedElement;
    $('[data-date]').each(function() {
        if ($(this).val(myDate)){
           mySelectedElement = $(this);
        }
    });
}

SearchByDate("8.09.2017");

所以基本上，您使用 data-date 搜索所有属性，如果它的值对应于 SearchByDate 中的属性（您随时调用的函数），它会将结果元素分配为mySelectedElement.

Answer 2

当您使用 data() 的 setter 来应用值时经常会出现此问题，因为它不会更新 DOM，因此属性选择器基于 data 属性将找不到该元素。该值存储在一个对象中 jQuery 作为性能目的的缓存维护。

要解决此问题，请使用 filter() 查找元素：

var data = $('#scheduler-table > div.row > div:nth-child(4) > div').filter(function() {
  return $(this).data('date') == '8.09.2017';
}).data();

jQuery 数据选择器找不到存在的元素

jQuery data selector doesn't find element that exists

jquery

jquery-selectors

编辑后的答案：