javascript - 如何修改所有选定 id 的子 li 和 div 的元素？

Question

• 我想访问类内的 id="p5pg5QXlX-an-obj-1"到 id="p5pg5QXlX-an-obj-31"id 并应用动画播放状态属性。

这是我的代码:

<div id="p5pg5QXlX-an-anim"><ol>

<li id="p5pg5QXlX-an-scene-0" >
<div class="p5pg5QXlX-an-stage">
<div id="p5pg5QXlX-an-obj-1"><div><img  height="416" width="320"     src="assets/overlay1.png"></div></div>
<div id="p5pg5QXlX-an-obj-2"><div><img  height="416" width="320"  src="assets/stars-and-chand.png"></div></div>
<div id="p5pg5QXlX-an-obj-3"><div><img  height="75" width="320"  src="assets/stars-support.png"></div></div>
<div id="p5pg5QXlX-an-obj-4"><div><img  height="416" width="320"  src="assets/page1-bottom-design.png"></div></div>
<div id="p5pg5QXlX-an-obj-5"><div><img  height="416" width="320"  src="assets/page1-minars.png"></div></div>
<div id="p5pg5QXlX-an-obj-6"><div><img  height="416" width="320"  src="assets/ramadan.png"></div></div>
<div id="p5pg5QXlX-an-obj-7"><div><img  height="416" width="320"  src="assets/mubarak.png"></div></div>
<div id="p5pg5QXlX-an-obj-8"><div><img  height="416" width="320"  src="assets/page1hw.png"></div></div>
<div id="p5pg5QXlX-an-obj-9"><div><img  height="416" width="320"  src="assets/panel.png"></div></div>
<div id="p5pg5QXlX-an-obj-10"></div>
<div id="p5pg5QXlX-an-obj-11"></div>
<div id="p5pg5QXlX-an-obj-12"><div><img  height="89" width="89"  src="assets/rplay.png"></div></div>
</div>
</li>

<li id="p5pg5QXlX-an-scene-7" >
<div class="p5pg5QXlX-an-stage">
<div id="p5pg5QXlX-an-obj-13"><div><img  height="416" width="320"  src="assets/overlay2.png"></div></div>
<div id="p5pg5QXlX-an-obj-14"><span>Receiver Name</span></div>
<div id="p5pg5QXlX-an-obj-15"><span>Wishing you a wonderful Birthday and a prosperous year ahead!</span></div>
<div id="p5pg5QXlX-an-obj-16"><div><img  height="119" width="111"  src="assets/page2-logo.png"></div></div>
<div id="p5pg5QXlX-an-obj-17"><div><img  height="416" width="320"  src="assets/page2hw.png"></div></div>
<div id="p5pg5QXlX-an-obj-18"><div><img  height="416" width="320"  src="assets/panel.png"></div></div>
</div>
</li>

<li id="p5pg5QXlX-an-scene-4" >
<div class="p5pg5QXlX-an-stage">
<div id="p5pg5QXlX-an-obj-19"><div><img  height="416" width="320"  src="assets/overlay3.png"></div></div>
<div id="p5pg5QXlX-an-obj-20"><div><img  height="350" width="639"  src="assets/3-3.jpg"></div></div>
<div id="p5pg5QXlX-an-obj-21"><div><img  height="350" width="639"  src="assets/3-1.jpg"></div></div>
<div id="p5pg5QXlX-an-obj-22"><div><img  height="350" width="639"  src="assets/3-2.jpg"></div></div>
<div id="p5pg5QXlX-an-obj-23"><div><img  height="416" width="320"  src="assets/page2hw.png"></div></div>
<div id="p5pg5QXlX-an-obj-24"><div><img  height="416" width="320"  src="assets/panel.png"></div></div>
<div id="p5pg5QXlX-an-obj-25"><div><img  height="40" width="320"  src="assets/strip.png"></div></div>
<div id="p5pg5QXlX-an-obj-26"><div><img  height="40" width="54"  src="assets/map.png"></div></div>
<div id="p5pg5QXlX-an-obj-27"><div><img  height="40" width="54"  src="assets/phone.png"></div></div>
<div id="p5pg5QXlX-an-obj-28"><div><img  height="40" width="54"  src="assets/url.png"></div></div>
<div id="p5pg5QXlX-an-obj-29"><div><img  height="40" width="54"  src="assets/email.png"></div></div>
<div id="p5pg5QXlX-an-obj-30"><div><img  height="39" width="43"  src="assets/giftcard.png"></div></div>
<div id="p5pg5QXlX-an-obj-31"><div><img  height="40" width="50"  src="assets/social.png"></div></div>
</div>
</li>

</ol>
</div>

我想将动画状态属性应用于从 id="p5pg5QXlX-an-obj-1"到 id="p5pg5QXlX-an-obj-31"的所有 id，所以请告诉我如何访问 id在类里面？

我这样做了:

var id = document.querySelectorAll("#p5pg5QXlX-an-anim > ol> li > div > div");
        [].forEach.call(id, function(el, i) {
            el.style.WebkitAnimationPlayState = "paused";
            el.style.animationPlayState = "paused";
        });

但它只对第一个 li 元素运行，而不是对所有 li 元素运行，所以请帮帮我 &

因为我想要这个的通用代码所以请帮助我并尝试在 javascript 中给出 sol'n

Answer 1

您可以使用以下方法使您的选择器更加具体:

tag[attribute^="value"]

这将选择以您指定的值开头的任何标签。在你的情况下，我相信你会想尝试:

li[id^="p5pg5QXlX-an-obj-"]

您的所有 ID 都以该字符串开头。我希望这会有所帮助。