Question

我有一个包含3个类的div，第三个类（动态）更改

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

我需要选择具有班级名称的元素＆＃39;一个＆＃39;，＆＃39;两个＆＃39;并获得第3名任何名称的类名。

我已尝试使用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指出了我正确的方向！使用他的例子我想出了这个返回元素的类“一二动态四五”：

<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>

具有动态类名

2 个答案: