javascript - 如何使用 find() 函数通过数据属性查找元素？

Question

我通过 jquery data() 函数向元素添加数据属性。

我想使用find()函数来获取元素。但显然，这是行不通的。

我想做的是缓存元素的父元素并做很多事情。

像这样:

var $parent = $('#parent');
var $dataElement = $parent.findByData('whatever');
$parent.xxx().xxx().xxx()....;

我不想要这个:

var $parent = $('#parent');
var $dataElement = $("#parent [data-whatever='whatever']");
$parent.xxx().xxx().xxx()....;
//It looks like find the parent twice.

任何函数都可以做到这一点吗？

Answer 1

我通过 jquery data() 函数向元素添加数据属性。

正如您所提到的，您正在使用 jQuery 的 data() 方法将 data 设置为元素。它不会在 DOM 中添加任何属性。所以你无法通过 .find() 找到它，因为它在内存中*。

相反，您应该使用 .attr() 方法来设置数据属性，然后您可以使用 .find() 方法从 DOM 中读取它。

^{* 没有合适的词}

下面是使用 .data() 设置数据并尝试查找它的示例。

<小时/>

$('#parent').find('.two').data('test', 'myTest');

var div = $('#parent').find('.child[data-test="myTest"]').length;

alert(div);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='parent'>
  <div class='child one'></div>
  <div class='child two'></div>
</div>

<小时/>

下面是使用 .attr() 设置数据并尝试查找它的示例。

<小时/>

$('#parent').find('.two').attr('data-test', 'myTest');

var div = $('#parent').find('.child[data-test="myTest"]').length;

alert(div);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='parent'>
  <div class='child one'></div>
  <div class='child two'></div>
</div>

<小时/>

下面是根据您的评论的示例:

<小时/>

$('#parent').find('.two').data('test', 'myTest');

var div = $('#parent').find('.child').filter(function(){
    return $(this).data('test') == 'myTest'
}).text();

console.log(div);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='parent'>
  <div class='child one'>One</div>
  <div class='child two'>Two</div>
</div>