Select 多个项目按标题查询SelectorAll

Question

我正在尝试 select 多个项目使用 document.querySelectorAll 并通过它们的 html title.

获取元素

我还需要在我的查询中插入多个 select or：我有一个包含 n 元素的向量，每个元素都是一个 title 我需要 [=45] =].

我已经遵循了这个答案：Select an element by title with JavaScript and modify it? 但没有成功。

我设法使它起作用，但仅适用于单个元素。

1) Html

<div id="pad">
    <ol class="even first">
        <li class='hex' title="C2">
            <div class="note">C2</div>
        </li>
        <li class='hex' title="G2">
            <div class="note">G2</div>
        </li>
        <li class='hex' title="D3">
            <div class="note">D3</div>
        </li>
        <li class='hex' title="A3">
            <div class="note">A3</div>
        </li>
        <li class='hex' title="E4">
            <div class="note">E4</div>
        </li>
    </ol>
    <ol class="odd">
        <li class='hex' title="A1">
            <div class="note">A1</div>
        </li>
        <li class='hex' title="E2">
            <div class="note">E2</div>
        </li>
        <li class='hex' title="B2">
            <div class="note">B2</div>
        </li>
        <li class='hex' title="Gb3">
            <div class="note">Gb3</div>
        </li>
        <li class='hex' title="Db4">
            <div class="note">Db4</div>
        </li>
        <li class='hex' title="Ab4">
            <div class="note">Ab4</div>
        </li>
    </ol>
    <ol class="even">
        <li class='hex' title="Db2">
            <div class="note">Db2</div>
        </li>
        <li class='hex' title="Ab2">
            <div class="note">Ab2</div>
        </li>
        <li class='hex' title="Eb3">
            <div class="note">Eb3</div>
        </li>
        <li class='hex' title="Bb3">
            <div class="note">Bb3</div>
        </li>
        <li class='hex' title="F4">
            <div class="note">F4</div>
        </li>
    </ol>

这是六角音乐键盘的 html。

2) javascript

notes = ['C2','E2','G2']
keys = document.querySelectorAll(".hex"); //this works fine
//correctly select the single node with title = 'C2'
selected_notes = document.querySelectorAll('[title="C2"]');

如何在查询中 "insert" 我的数组，以便 select 所有标题为 C2、E2 或 G2 的元素？

我想做这样的事情：

selected_notes = document.querySelectorAll('[title=notes]'); //obviously this doesn't work

可以吗？或者我必须对 notes 数组的每个元素迭代一个查询？

Answer 1

实现此目的的一种方法是 group selectors into one rule，为 "title" 属性的每个目标值分隔不同的选择器，如下所示：

[title="C2"], [title="E2"], [title="G2"]

上面的选择器将实现以下结果（选择可视化，粉红色背景应用于所选节点）：

const nodes = document.querySelectorAll('[title="C2"], [title="E2"], [title="G2"]');

for(const node of nodes) {
  node.style.background = "pink";
}

<div id="pad">
  <ol class="even first">
    <li class='hex' title="C2"><div class="note">C2</div></li>
    <li class='hex' title="G2"><div class="note">G2</div></li>
    <li class='hex' title="D3"><div class="note">D3</div></li>
    <li class='hex' title="A3"><div class="note">A3</div></li>
    <li class='hex' title="E4"><div class="note">E4</div></li>
  </ol>  
  <ol class="odd">
    <li class='hex' title="A1"><div class="note">A1</div></li>
    <li class='hex' title="E2"><div class="note">E2</div></li>
    <li class='hex' title="B2"><div class="note">B2</div></li>
    <li class='hex' title="Gb3"><div class="note">Gb3</div></li>
    <li class='hex' title="Db4"><div class="note">Db4</div></li>
    <li class='hex' title="Ab4"><div class="note">Ab4</div></li>
  </ol>
  <ol class="even">
    <li class='hex' title="Db2"><div class="note">Db2</div></li>
    <li class='hex' title="Ab2"><div class="note">Ab2</div></li>
    <li class='hex' title="Eb3"><div class="note">Eb3</div></li>
    <li class='hex' title="Bb3"><div class="note">Bb3</div></li>
    <li class='hex' title="F4"><div class="note">F4</div></li>
  </ol>

Answer 2

仅对于 querySelectorAll，不幸的是，您必须写出每个可能的标题属性，并将其放入查询字符串中：

const selected_notes = document.querySelectorAll('[title="C2"], [title="E2"], [title="G2"]');
console.log(selected_notes);

<div id="pad">
  <ol class="even first">
    <li class='hex' title="C2"><div class="note">C2</div></li>
    <li class='hex' title="G2"><div class="note">G2</div></li>
    <li class='hex' title="D3"><div class="note">D3</div></li>
    <li class='hex' title="A3"><div class="note">A3</div></li>
    <li class='hex' title="E4"><div class="note">E4</div></li>
  </ol>  
  <ol class="odd">
    <li class='hex' title="A1"><div class="note">A1</div></li>
    <li class='hex' title="E2"><div class="note">E2</div></li>
    <li class='hex' title="B2"><div class="note">B2</div></li>
    <li class='hex' title="Gb3"><div class="note">Gb3</div></li>
    <li class='hex' title="Db4"><div class="note">Db4</div></li>
    <li class='hex' title="Ab4"><div class="note">Ab4</div></li>
  </ol>
  <ol class="even">
    <li class='hex' title="Db2"><div class="note">Db2</div></li>
    <li class='hex' title="Ab2"><div class="note">Ab2</div></li>
    <li class='hex' title="Eb3"><div class="note">Eb3</div></li>
    <li class='hex' title="Bb3"><div class="note">Bb3</div></li>
    <li class='hex' title="F4"><div class="note">F4</div></li>
  </ol>

为了让事情变得更干，我会 .map 一组你想要的元素的标题：

const notes = ['C2','E2','G2'];
const selected_notes = notes.map(title => document.querySelector(`[title="${title}"]`));
console.log(selected_notes);

<div id="pad">
  <ol class="even first">
    <li class='hex' title="C2"><div class="note">C2</div></li>
    <li class='hex' title="G2"><div class="note">G2</div></li>
    <li class='hex' title="D3"><div class="note">D3</div></li>
    <li class='hex' title="A3"><div class="note">A3</div></li>
    <li class='hex' title="E4"><div class="note">E4</div></li>
  </ol>  
  <ol class="odd">
    <li class='hex' title="A1"><div class="note">A1</div></li>
    <li class='hex' title="E2"><div class="note">E2</div></li>
    <li class='hex' title="B2"><div class="note">B2</div></li>
    <li class='hex' title="Gb3"><div class="note">Gb3</div></li>
    <li class='hex' title="Db4"><div class="note">Db4</div></li>
    <li class='hex' title="Ab4"><div class="note">Ab4</div></li>
  </ol>
  <ol class="even">
    <li class='hex' title="Db2"><div class="note">Db2</div></li>
    <li class='hex' title="Ab2"><div class="note">Ab2</div></li>
    <li class='hex' title="Eb3"><div class="note">Eb3</div></li>
    <li class='hex' title="Bb3"><div class="note">Bb3</div></li>
    <li class='hex' title="F4"><div class="note">F4</div></li>
  </ol>

Select 多个项目按标题查询SelectorAll

Select multiple items by title with querySelectorAll

html

javascript

jquery-selectors