添加javascript选择器

Question

我想使用javascript将html，css代码添加到wordpress主页。我要更改的对象上没有id或不同的CSS类的问题（我想向图像添加文本和按钮皮棉）。

我已经尝试过类似的操作，但是找不到特定问题的解决方案

// 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填充一个长轴吗？

我添加了开始参数

[...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>";
    }