Question

我有很多节点，我想在 data-th 为“ Entrega”时获得该节点

<span class=“price” data-bind=“text: getValue(), attr: {‘data-th’: title}” data-th=“Entrega”>0.00</span>

有可能吗？

Answer 1

是的。只需使用querySelector来匹配该数据属性值即可。

注意：您的HTML中带有智能引号（可能是复制引号），但是它们会导致代码功能出现问题。

const th = document.querySelector('span[data-th="Entrega"]');

console.log(th);

<span class="price" data-bind="text: getValue(), attr: {'data-th': title}" data-th="Entrega">0.00</span>

Answer 2

最简单的方法是循环抛出所有这些跨度并获得所需的跨度。

object.getAttribute('data-th').includes('Entrega')

上面的代码从对象获取数据属性data-th，并检查其是否包含字符串'Entrega'。

有关数据属性检查的更多信息：

https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

function callFunction(){
  // GET ALL THE SPANS
  var spandata = document.getElementsByTagName('span');
  
  // LOOP ON THAT
  Array.from(spandata).forEach(function(object){
  
  // THESE PRINT THE VALUE OF data-th
  console.log(object.getAttribute('data-th'));
  
    // IF ITS Entrega THEN DO SOMETHING
    if(object.getAttribute('data-th').includes('Entrega')){
      // DO SOMETHING HERE
      alert(object.getAttribute('data-th'));
    }
  })
}

span{
display:block;
}

<span class=“price” data-bind=“text: getValue(), attr: {‘data-th’: title}” data-th=“Entrega”>0.00</span>
  <span class=“price” data-bind=“text: getValue(), attr: {‘data-th’: title}” data-th=“Papa”>1.00</span>
  <span class=“price” data-bind=“text: getValue(), attr: {‘data-th’: title}” data-th=“Roach”>2.00</span>
  
<button onclick="callFunction()">print here</button>

如何获取传递特定标签名称的节点html

2 个答案: