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

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

$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

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

正如您所提到的，您正在使用data jQuery方法将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>

Answer 4

ShchangeNotify

这将返回＆＃34;＃parent＆＃34;中的一系列死亡元素。元素有数据 - 无论什么=＆＃39;无论什么＆＃39;。

IShellFolderViewCB.MessageSFVCB()

Demo

如何使用find（）函数通过data属性查找元素？

4 个答案: