Question

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

＆＃13;

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

＆＃13;

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

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

Answer 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>

Answer 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>

更新：检查显式数据值，而不仅仅是检查

Jquery - 使用to element添加数据，并通过添加数据获取元素

2 个答案: