如何使用find()函数根据数据属性查找元素

How to find an element by data attribute with find() function?

本文关键字：数据属性 查找 元素 函数 何使用 find      更新时间：2023-09-26

我通过jquery data()函数为元素添加了一个data属性。

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

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

: 

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

I don't want this:

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

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

我通过jquery data()函数为元素添加了一个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>

您可以尝试$(child,parent)方式和属性选择器$('[attribute-name]')作为参数，

var $parent = $('#parent');
var $dataElement = $parent.children().filter(function(){
                       return $(this).data('whatever') !== undefined
                   });

如果你需要一个函数findByData()，

$.fn.findByData = function(dataAttribute){
    return $(this).children().filter(function(){
        return $(this).data(dataAttribute) !== undefined
    });
}
var $parent = $('#parent')
var $dataElement = $parent.findByData('whatever');
<<p> 小提琴演示/strong>

如果您想仅在父元素的数据属性值等于某个值时获取父元素，则需要使用过滤器函数:

$parent.filter(function(){
   return $(this).data('whatever') == "whatever"
});

查找父元素的数据属性value等于somevalue的子元素:

$parent.find("*").filter(function(){
   return $(this).data('whatever') == "whatever"
});;

<div id="parent">
    <p data-whatever='whatever'>Whatever1</p>
    <p data-whatever='whatever'>Whatever2</p>
    <p data-whatever='whereever'>Whereever1</p>
</div>

var $parent = $('#parent');
var $dataElements = $parent.find("*[data-whatever='whatever']");

这将返回"#parent"元素中具有data-whatever='whatever'的继承元素数组。

$.each($dataElements,function(key,val){
    console.log( $($dataElements[key]).html());
});
演示

相关文章：