我通过 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.
任何函数都可以做到这一点吗?
最佳答案
我通过 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>
关于javascript - 如何使用 find() 函数通过数据属性查找元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30297282/