按数据属性选择元素

11 回答

• 10

  要在Chrome中使用此值，必须使用另一对引号 .

  它只适用于，例如，像这样：

  $('a[data-customerID=22]');
  

  回复于 2024-04-29T08:55:50+08:00
• 0

  通过Jquery filter（）方法：

  http://jsfiddle.net/9n4e1agn/1/

  HTML:

  <button   data-id='1'>One</button>
  <button   data-id='2'>Two</button>
  

  JavaScript:

  $(function() {    
      $('button').filter(function(){
          return $(this).data("id")   == 2}).css({background:'red'});  
       });
  

  回复于 2024-04-29T08:55:50+08:00
• 124

  像这样的结构： $('[data-XXX=111]') 在 Safari 8.0 中不起作用 .

  如果以这种方式设置数据属性： $('div').data('XXX', 111) ，它只适用于直接在DOM中设置数据属性，如下所示： $('div').attr('data-XXX', 111) .

  我认为这是因为jQuery团队优化了垃圾收集器，以防止在每个更改数据属性上重建DOM时出现内存泄漏和繁重操作 .

  回复于 2024-04-29T08:55:50+08:00
• 59

  要选择具有数据属性 data-customerID==22 的所有锚点，应包括 a 以将搜索范围限制为仅该元素类型 . 当页面上有许多元素时，以大循环或高频率执行数据属性搜索可能会导致性能问题 .

  $('a[data-customerID="22"]');
  

  回复于 2024-04-29T08:55:50+08:00
• 11

  $('*[data-customerID="22"]');
  

  您应该可以省略 * ，但如果我没记错，根据您使用的jQuery版本，这可能会产生错误的结果 .

  请注意，为了与Selectors API（ document.querySelector{,all} ）兼容，请在属性值（ 22 ）may not be omitted in this case周围引用 .

  此外，如果您在jQuery脚本中大量使用数据属性，则可能需要考虑使用HTML5 custom data attributes plugin . 这允许您使用 .dataAttr('foo') 编写更易读的代码，并在缩小后产生更小的文件大小（与使用 .attr('data-foo') 相比） .

  回复于 2024-04-29T08:55:50+08:00
• 250

  Native JS示例

  Get NodeList of elements

  var elem = document.querySelectorAll('[data-id="container"]')
  

  html： <div data-id="container"></div>

  Get the first element

  var firstElem = document.querySelectorAll('[id="container"]')[0]
  

  html： <div id="container"></div>

  Target a collection of nodes which returns a nodelist

  document.getElementById('footer').querySelectorAll('[data-id]')
  

  HTML：

  <div class="footer">
      <div data-id="12"></div>
      <div data-id="22"></div>
  </div>
  

  Get elements based on multiple (OR) data values

  document.querySelectorAll('[data-section="12"],[data-selection="20"]')
  

  HTML：

  <div data-selection="20"></div>
  <div data-section="12"></div>
  

  Get elements based on combined (AND) data values

  document.querySelectorAll('[data-prop1="12"][data-prop2="20"]')
  

  HTML：

  <div data-prop1="12" data-prop2="20"></div>
  

  Get items where the value starts with

  document.querySelectorAll('[href^="https://"]')
  

  回复于 2024-04-29T08:55:50+08:00
• 8

  没有jQuery我没有看过JavaScript的答案 . 希望它可以帮助某人 .

  var elements = document.querySelectorAll('[data-customerID="22"]');
  
  elements[0].innerHTML = 'it worked!';
  

  <a data-customerID='22'>test</a>
  

  信息：

  • data attributes

  • .querySelectorAll();

  回复于 2024-04-29T08:55:50+08:00
• 43

  有时需要根据元素是否附加了数据项来过滤元素 programmatically （也就是说不通过dom-attributes）：

  $el.filter(function(i, x) { return $(x).data('foo-bar'); }).doSomething();
  

  以上工作，但不是很可读 . 更好的方法是使用伪选择器来测试这种事情：

  $.expr[":"].hasData = $.expr.createPseudo(function (arg) {
      return function (domEl) {
          var $el = $(domEl);
          return $el.is("[" + ((arg.startsWith("data-") ? "" : "data-") + arg) + "]") || typeof ($el.data(arg)) !== "undefined";
      };
  });
  

  现在我们可以将原始语句重构为更流畅和可读的内容：

  $el.filter(":hasData('foo-bar')").doSomething();
  

  回复于 2024-04-29T08:55:50+08:00
• 9

  对于人们谷歌搜索并想要有关使用数据属性选择的更一般规则：

  $("[data-test]") 将选择仅具有数据属性的任何元素（无论属性的值） . 包含：

  <div data-test=value>attributes with values</div>
  <div data-test>attributes without values</div>
  

  ---

  $('[data-test~="foo"]') 将选择数据属性包含 foo 的任何元素，但不一定要精确，例如：

  <div data-test="foo">Exact Matches</div>
  <div data-test="this has the word foo">Where the Attribute merely contains "foo"</div>
  

  ---

  $('[data-test="the_exact_value"]') 将选择数据属性精确值为 the_exact_value 的任何元素，例如：

  <div data-test="the_exact_value">Exact Matches</div>
  

  但不是

  <div data-test="the_exact_value foo">This won't match</div>
  

  回复于 2024-04-29T08:55:50+08:00
• 4

  使用 $('[data-whatever="myvalue"]') 将选择具有html属性的任何内容，但是在较新的jQuery中，似乎如果使用 $(...).data(...) 附加数据，它会使用一些神奇的浏览器并且不会影响html，因此 .find 不会发现 .find .

  验证（使用1.7.2测试）（另见fiddle）:(更新为更完整）

  var $container = $('<div><div id="item1"/><div id="item2"/></div>');
  
  // add html attribute
  var $item1 = $('#item1').attr('data-generated', true);
  
  // add as data
  var $item2 = $('#item2').data('generated', true);
  
  // create item, add data attribute via jquery
  var $item3 = $('<div />', {id: 'item3', data: { generated: 'true' }, text: 'Item 3' });
  $container.append($item3);
  
  // create item, "manually" add data attribute
  var $item4 = $('<div id="item4" data-generated="true">Item 4</div>');
  $container.append($item4);
  
  // only returns $item1 and $item4
  var $result = $container.find('[data-generated="true"]');
  

  回复于 2024-04-29T08:55:50+08:00
• 1281

  只是为了通过“生活标准”的某些功能完成所有答案 - 到现在（在html5时代），可以在没有第三方库的情况下完成：

  • pure / plain JS with querySelector（使用CSS选择器）：

  • 选择DOM中的第一个： document.querySelector('[data-answer="42"],[type="submit"]')

  • 在DOM中选择全部： document.querySelectorAll('[data-answer="42"],[type="submit"]')

  • pure / plain CSS

  • 一些特定的标签： [data-answer="42"],[type="submit"]

  • 具有特定属性的所有标记： [data-answer] 或 input[type]

  回复于 2024-04-29T08:55:50+08:00