javascript - 隐藏具有相同类或 ID 的第二个元素

Question

我在 WP 中有双重代码:

<div class="row top-banner">
    <div class="columns">
        <section id="text-12" class="widget widget_text">           <div class="textwidget"><img id="bannerFront" class="showRtb"  style="cursor:pointer;" src="https://www.asdasd.com/wp-content/uploads/2017/03/treat_someone-1.png" alt="treat_someone"></div>
        </section>
    </div>
</div>

我已经尝试了 WP 后端的所有方法，并决定使用 css + JavaScript 来解决这个问题。我只想展示第一个顶级横幅。这是隐藏它的代码:

.textwidget:nth-of-type(1) {
    display:none;
}

当我将该代码放到我的 WP 页面上时，两个横幅都消失了，而不仅仅是第二个。

如何只隐藏第二个横幅而不隐藏第一个？

Answer 1

nth-of-type 适用于 sibling ，换句话说，他们必须是同一个 parent 的 child 。如果它们在页面的不同父级中，nth- 将不起作用。您可以选择具有类 .textwidget 的所有元素，并使用 jQuery 隐藏第二个元素(索引 1)。

 $('.textwidget:eq(1)').hide();

编辑:...或者您可以使用 Vanilla Javascript

// on page ready method definition
function ready(fn) {
  if (document.readyState != 'loading'){
    fn();
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
}

// run the function inside this method when page finished loading
ready(function(){
  // hide second element
  document.getElementsByClassName('textwidget')[1].style.display = 'none';
})

<div class="row top-banner">
    <div class="columns">
      <section id="text-12" class="widget widget_text">
        <div class="textwidget">
          <img id="bannerFront" class="showRtb" style="cursor:pointer;"
               src="https://i.vimeocdn.com/portrait/58832_300x300"
               alt="treat_someone"></div>
      </section>
    </div>
  </div>
  <div class="row top-banner">
    <div class="columns">
      <section id="text-12" class="widget widget_text">
        <div class="textwidget">
          <img id="bannerFront" class="showRtb" style="cursor:pointer;"
               src="https://i.vimeocdn.com/portrait/58832_300x300"
               alt="treat_someone"></div>
      </section>
    </div>
  </div>