如何使用 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

如果只想获取父元素的data属性值等于somevalue，需要使用过滤函数：

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

如果要查找父元素的数据属性值等于某个值的子元素：

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

Answer 2

您可以尝试 $(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');

Fiddle Demo

Answer 3

<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']");

这将 return 在“#parent”元素中包含数据的已故元素数组='whatever'。

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

Demo

Answer 4

我通过 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>

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

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

javascript

jquery

jquery-selectors