Question

使用jQuery（或document.querySelector()），您可以使用以下内容按属性值获取元素：

//Exact value
$("[attribute='value']");
//Contains value
$("[attribute*='value']");
//Starts with
$("[attribute^='value']");
//Ends with
$("[attribute$='value']");

但我想要实现的目标有点不同。

假设我有这个元素：

<button ls-click="alert('a')">Click!</button>

我需要获取一个元素，因为它有一个以ls-开头的属性。

jQuery的hasAttribute选择器与$("[attr]")类似，但它只匹配具有该确切属性的元素，不接受通配符。

我可以为该按钮添加一个类，并检查每个属性是否与ls-匹配，但这与我想要达到的目标相反。

我也可以运行每个DOM元素，并检查它们中是否有任何属性（我猜这是jQuery的功能），但我认为这不是最好的解决方案。

是否有选择器可以做到这一点？（如果没有jQuery的某种方式，那也很有趣）。

Answer 1

不，没有属性选择器会选择属性名称的部分匹配。

你能做的最好的事情就是尽可能地缩小元素列表，给出关于元素的其他信息，比如document下DOM中更具体的位置，及其标签/类/等。

var els = document.querySelectorAll("#some_container button");
for (const el of els) {
  for (const attr of el.attributes) {
    if (attr.name.startsWith("ls-")) {
      console.log(attr.value)
    }
  }
}

Answer 2

这个问题的答案“不”让我感到恐惧。

所以它制作了一个小脚本我不确定它是完全“全面”的。但我做到了这一点，它不会与其他属性冲突......至少。

下面，所有具有以ls-开头的属性的元素都会获得绿色背景。

var pattern = /ls-.+?=/gm;

var foundAttr = [];
$("body").find("*").not('script').each(function(){
  
  var match = this.outerHTML.toString().match(pattern);
  if(match!=null){
    
    // Remove the = sign
    var attr = match[0].substring(0,match[0].length-1);
    
    // Console the element markup and store it in an array
    foundAttr.push($("["+attr+"]"));
  }
});

// Add a class to each found element
foundAttr.forEach(function(element){
  element.addClass("found");
});

.found{
  background-color:green;
}
.something{
  padding:2px;
  margin:0.5em;
  border:1px solid orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button ls-click="alert('a')" id="ok">Click!</button>
<h1>ok</h1>
<button ls-hello="alert('a')">Click!</button>
<button class="yo" ls-hello="alert('a')">Click!</button>
<button ls-hello="alert('a')">Click!</button>
<div class="something">
  I'm a div<br>
  <button ls-yes="alert('a')">Click!</button>
</div>

<button no="alert('a')">I'm not found :(</button>
<p>Hello!</p>
<button ls-bye="alert('a')">Click!</button>

此CodePen

中有一些console.logs

通过匹配属性键而不是值来查找元素

2 个答案: