Jquery - 向元素添加数据并通过添加的数据获取元素[重复]

Posted 2023-03-05

【中文标题】Jquery - 向元素添加数据并通过添加的数据获取元素[重复]

【英文标题】：Jquery - add data with to element and get element by added data [duplicate]

【发布时间】：2018-09-02 00:56:04

【问题描述】：

我可以通过使用 jquery 添加的数据来获取和元素吗？例如

   function first() 
    var modal_body = $('.modal-body');
    modal_body.data('id',4)
   
   
   function second() 
    var modal_body = $('.modalbody[data-id=4]');
   
    
   

我已经尝试过这个例子，但它不起作用，因为元素没有 data-id。 Jquery 在内部保存数据并创建一个名为$.cache 的空对象。

是否有可能获取包含使用 Jquery 添加的数据的元素？

【问题讨论】：

将$('.modalbody[data-id=4]');更改为$('.modal-body[data-id=4]');

@AlivetoDie 这是一个属性选择器，但标记中没有data-id 属性，因此这不起作用。

@Andreas 建议 dup 与您之前的评论完全相反 - 没有 data- 属性。

@freedomn-m 该问题的答案完全符合此要求：***.com/a/15651670/402037, ***.com/a/22209579/402037

@Andreas 感谢您的澄清-问题本身不一样，答案也不一样-但正如您所说，有合适且相关的答复

【参考方案1】：

很遗憾，没有。

正如您所说，数据属性是由 jQuery 内部添加的。实现你想要的唯一方法是直接设置属性：

   function first() 
     var modal_body = $('.modal-body');
     modal_body.attr('data-id',4)
   

   function second() 
    var modal_body = $('.modal-body[data-id=4]'); // note: fixed .modalbody to .modal-body
   

这使得它也可以作为.data('id') 使用。

另一种选择是使用.filter()：

   function first() 
     var modal_body = $('.modal-body');
     modal_body.data('id',4)
   
   function second() 
    var modal_body = $('.modal-body').filter(function () 
      return $(this).data('id') === 4;
    );
   

下面的演示。

(() => 
  var modal_body = $('div.modal-body');
  modal_body.attr('data-id', 4)

  console.log('found using attr:', $('.modal-body[data-id=4]').length);
)();

(() => 
  var modal_body = $('span.modal-body');
  modal_body.data('id', 4)

  console.log('found using filter:', $('span.modal-body').filter(function() 
    return $(this).data('id') === 4;
  ).length);
)();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="modal-body">modal-body</div>

<span class="modal-body">modal-body</span>

【讨论】：

谢谢，几分钟前我找到了帖子宽度过滤功能。

【参考方案2】：

不使用单个选择器，但肯定使用.filter()：

$("#x").data("data", "a");
$("#y").data("data", 4);

var x2 = $("div").filter(function() 
    return $(this).data("data") != null;
);

var y4 = $("div").filter(function() 
    return $(this).data("data") === 4;
);

console.log("Divs:", $("div").length, "With ID:", x2.length, "With id==4:", y4.length);
x2.addClass("box");
y4.addClass("box4");

div  border: 1px solid #CCC; 
.box  border: 1px solid green; 
.box4  border: 1px solid red; 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='x'>x</div>
<div id='y'>y</div>
<div id='z'>y</div>

更新：检查明确的数据值，而不仅仅是任何

【讨论】：

已将帖子标记为重复。 filter 函数解决了这个问题。谢谢