添加javascript选择器

Question

我想使用javascript将html、css代码添加到wordpress主页。问题是，我想更改的对象上没有id或不同的css类(我想在图像中添加文本和按钮lint(。

我试过这样的方法，但找不到解决特定问题的

// Inspect element shows something like
//    #p-tab-1 > div > div.owl-stage-outer > div > div:nth-child(11) > div > div > div > div > div > a.lightbox-image
// I have tried something like this but can't find solution for the specific problem
document.getElementById('#p-tab-1 > div > div.owl-stage-outer > div > div:nth-child(11) > div > div > div > div > div > a.lightbox-image').innerHTML = '<ol><li>html data</li></ol>';

<div class="p-tabs-content">
<!--Portfolio Tab / Active Tab-->
<div class="p-tab active-tab" id="p-tab-1">
<div class="project-carousel owl-theme owl-carousel">
<!--Gallery Item-->
<div class="gallery-item">
<div class="inner-box">
<div class="image"><img width="430" height="500" src="/wp-content/uploads/2017/10/LazyBag-Beli3-430x500.jpg" class="attachment-oviedo_430x500 size-oviedo_430x500 wp-post-image" alt="" />
<!--Overlay Box-->
<div class="overlay-box">
<div class="content">
<a href="/lazy-bag-bez/"><span class="icon fa fa-link"></span></a>
<a class="lightbox-image" href="/wp-content/uploads/2017/10/LazyBag-Beli3.jpg" title="Lazy bag (Bež)" data-fancybox-group="gallery"><span class="icon fa fa-search"></span></a>
</div>
</div>
</div>
</div>
</div>
<!--Gallery Item-->
<div class="gallery-item">
<div class="inner-box">
<div class="image"><img width="430" height="500" src="/wp-content/uploads/2019/05/Lazy-bag-Beli-2b-430x500.jpg" class="attachment-oviedo_430x500 size-oviedo_430x500 wp-post-image" alt="" />
<!--Overlay Box-->
<div class="overlay-box">
<div class="content">
<a href="/lazy-bag-beli/"><span class="icon fa fa-link"></span></a>
<a class="lightbox-image" href="/wp-content/uploads/2019/05/Lazy-bag-Beli-2b.jpg" title="Lazy bag (Beli)" data-fancybox-group="gallery"><span class="icon fa fa-search"></span></a>
</div>
</div>
</div>
</div>
</div>
<!--Gallery Item-->
<div class="gallery-item">
<div class="inner-box">
<div class="image"><img width="430" height="500" src="/wp-content/uploads/2019/05/Lazy-bag-Crni-430x500.jpg" class="attachment-oviedo_430x500 size-oviedo_430x500 wp-post-image" alt="" />
<!--Overlay Box-->
<div class="overlay-box">
<div class="content">
<a href="/lazy-bag-crni/"><span class="icon fa fa-link"></span></a>
<a class="lightbox-image" href="/wp-content/uploads/2019/05/Lazy-bag-Crni.jpg" title="Lazy bag (Crni)" data-fancybox-group="gallery"><span class="icon fa fa-search"></span></a>
</div>
</div>
</div>
</div>
</div>

Answer 1

您正在查找querySelector或querySelectorAll

路径也可以简化

你确定要用OL填充一个achor吗？

我添加了启动参数

[...document.querySelectorAll('.gallery-item a.lightbox-image')]
.forEach(
(a,i) => a.innerHTML = '<ol start="'+(i+1)+'"><li>html data</li></ol>'
);

<div class="p-tabs-content">
<!--Portfolio Tab / Active Tab-->
<div class="p-tab active-tab" id="p-tab-1">
<div class="project-carousel owl-theme owl-carousel">
<!--Gallery Item-->
<div class="gallery-item">
<div class="inner-box">
<div class="image"><img width="430" height="500" src="/wp-content/uploads/2017/10/LazyBag-Beli3-430x500.jpg" class="attachment-oviedo_430x500 size-oviedo_430x500 wp-post-image" alt="" />
<!--Overlay Box-->
<div class="overlay-box">
<div class="content">
<a href="/lazy-bag-bez/"><span class="icon fa fa-link"></span></a>
<a class="lightbox-image" href="/wp-content/uploads/2017/10/LazyBag-Beli3.jpg" title="Lazy bag (Bež)" data-fancybox-group="gallery"><span class="icon fa fa-search"></span></a>
</div>
</div>
</div>
</div>
</div>
<!--Gallery Item-->
<div class="gallery-item">
<div class="inner-box">
<div class="image"><img width="430" height="500" src="/wp-content/uploads/2019/05/Lazy-bag-Beli-2b-430x500.jpg" class="attachment-oviedo_430x500 size-oviedo_430x500 wp-post-image" alt="" />
<!--Overlay Box-->
<div class="overlay-box">
<div class="content">
<a href="/lazy-bag-beli/"><span class="icon fa fa-link"></span></a>
<a class="lightbox-image" href="/wp-content/uploads/2019/05/Lazy-bag-Beli-2b.jpg" title="Lazy bag (Beli)" data-fancybox-group="gallery"><span class="icon fa fa-search"></span></a>
</div>
</div>
</div>
</div>
</div>
<!--Gallery Item-->
<div class="gallery-item">
<div class="inner-box">
<div class="image"><img width="430" height="500" src="/wp-content/uploads/2019/05/Lazy-bag-Crni-430x500.jpg" class="attachment-oviedo_430x500 size-oviedo_430x500 wp-post-image" alt="" />
<!--Overlay Box-->
<div class="overlay-box">
<div class="content">
<a href="/lazy-bag-crni/"><span class="icon fa fa-link"></span></a>
<a class="lightbox-image" href="/wp-content/uploads/2019/05/Lazy-bag-Crni.jpg" title="Lazy bag (Crni)" data-fancybox-group="gallery"><span class="icon fa fa-search"></span></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 2

您应该使用这个

对于第一个匹配元素：

document.querySelector("Your selector here");

用于获取所有匹配元素：

document.querySelectorAll("Your selector here");

您的代码：

for(var i = 0 ; i < document.querySelectorAll("a.lightbox-image").length ; i++){
document.querySelectorAll("a.lightbox-image")[i].innerHtml = "<ol><li>html data</li></ol>";
}