Question

使用示例更好地解释我的问题：

我有一个包含

之类的html文件

<a name="2846" href="Data.Product.html#2846" class="Function"> ... </a>
<a name="2877" href="Data.Product.html#2846" class="Function"> ... </a>
<a name="2911" href="Data.Product.html#2911" class="Function"> ... </a>

我想选择（通过CSS选择器）具有类“Function”的元素，其中href属性以name属性的确切值结束。在上面的示例中，只会选择以下两个

<a name="2846" href="Data.Product.html#2846" class="Function"> ... </a>
<a name="2911" href="Data.Product.html#2911" class="Function"> ... </a>

我想到了这一点，或许是a.Function[href$=?]行。我的问题是我可以在选择器中引用name属性的值，有没有办法做到这一点？

谢谢！

Answer 1

在您的情况下需要两个循环。一个用于获取所有Function类元素，然后检查href属性中是否包含name属性值。

试试这个：

var filteredEls = Array.prototype.filter.call( // Convert NodeList to Array
  document.getElementsByClassName('Function'), // Get all "Function" class elements
  function(el) {
    return el.getAttribute('href') === "Data.Product.html#" + el.name; // Filter elements with the condition
  }
);

console.dir(filteredEls); // check console

<a name="2846" href="Data.Product.html#2846" class="Function"> ... </a>
<a name="2877" href="Data.Product.html#2846" class="Function"> ... </a>
<a name="2911" href="Data.Product.html#2911" class="Function"> ... </a>

CSS：我可以在属性选择器中引用属性的值

1 个答案: