Question

带有动态类名的 document.querySelector

2015-09-08

5320

javascript

我有一个包含 3 个类的 div，第三个类（动态）发生了变化

<div class="one two dynamic">test</div>

我需要选择类名为“one”、“two”的元素，并且第三个类名可以是任意名称。

我尝试使用 document.querySelector('.one.two.*') - 请注意 *

任何建议

编辑：实际上有 5 个类，第三个类（动态）是动态生成的。抱歉，我应该最初就说明这一点，因为我知道这会使问题复杂化……

Answer 1

您可以：

使用 querySelectorAll 获取具有 one 和 two 类的所有元素。
借用 filter 创建一个仅包含恰好具有 3 个类的元素的数组。
获取该数组中的第一个元素。

[].filter.call(document.querySelectorAll('.one.two'), function(el) {
  return el.classList.length == 3;
})[0];

[].filter.call(document.querySelectorAll('.one.two'), function(el) {
  return el.classList.length == 3;
})[0].style.background = 'orange';

<p class="one two">one two</p>
<p class="one two three four">one two three four</p>
<p class="one two three">one two three</p>
<p class="one two three">one two three</p>

Answer 2

非常感谢 Oriol 为我指明了正确的方向！使用他的例子，我得出了这个，它返回类为“one two dynamic four five”的元素：

<body>
<p id="a" class="one two">a</p>
<p id="b" class="one two dynamic four five">b</p>
<p id="c" class="one two dynamic">c</p>
<p id="d" class="one two dynamic">d</p>

<script>
[].filter.call(document.querySelectorAll('.one.two'), function(el) {

    if(el.classList.toString().indexOf('four five') != -1){
      alert('id='+el.id);
      return el;
    }

})[0].style.background = 'orange';
</script>
</body>