不使用jquery按id选择列表项

mitkmikd  于 2021-09-23  发布在  Java
关注(0)|答案(2)|浏览(223)

我有一个这种类型的html列表

<ul>
 <li id="1.1" fatherid="1"> ...</li>
 <li id="1.2" fatherid="1"> ...</li>
 <li id="1.3" fatherid="1"> ...</li>
 ...
</ul>

我想选择列表中具有给定父ID的所有项目。例如,我想选择所有以“1”作为父ID的项目,但我不知道如何操作。我尝试使用queryselectorall和getelementbyid,但都不起作用,我更喜欢不使用jquery。谢谢你的回答。

f2uvfpb9

f2uvfpb91#

自从 Document.querySelectorAll 接受选择器我们可以使用css属性选择器:

const r = document.querySelectorAll('li[fatherid="1"]');
console.log(Array.from(r));
<ul>
 <li id="1.1" fatherid="1"> ...</li>
 <li id="1.2" fatherid="1"> ...</li>
 <li id="1.3" fatherid="1"> ...</li>
</ul>
afdcj2ne

afdcj2ne2#

您可以使用数据属性(https://developer.mozilla.org/en-us/docs/learn/html/howto/use_data_attributes)存储父ID(这是向html元素添加自定义属性的推荐方法)。然后,您可以使用 [data-fatherid] 选择器。

function getByFather(id) {
    return document.querySelectorAll(`[data-fatherid='${id}']`);
  }

  console.log([...getByFather(1)]);
  console.log([...getByFather(2)]);
<ul>
 <li id="1.1" data-fatherid="1">1.1</li>
 <li id="1.2" data-fatherid="1">1.2</li>
 <li id="1.3" data-fatherid="1">1.3</li>

 <li id="2.1" data-fatherid="2">2.1</li>
 <li id="2.2" data-fatherid="2">2.2</li>
</ul>

相关问题