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

在普通javascript中，尝试

document.getElementsByClassName('textwidget')[1].style.display='none';

Answer 2

您使用的是错误的CSS。我修改了你的CSS代码，它适合你。

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

Answer 3

nth-of-type：selector匹配其父的特定类型的第n个子元素。这里是我们隐藏.textwidget

的第二个元素的代码

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

<div class="row top-banner">
  <div class="columns">
    <section id="text-12" class="widget widget_text">
      <div class="textwidget">1st<img id="bannerFront" class="showRtb" style="cursor:pointer;" src="" alt="treat_someone"></div>
      <div class="textwidget">2nd<img id="bannerFront" class="showRtb" style="cursor:pointer;" src="" alt="treat_someone"></div>
    </section>
  </div>
</div>

Answer 4

nth-of-type适用于兄弟姐妹，换句话说，他们需要是同一父母的孩子。如果他们在页面中的父母不同，nth-将无法正常工作。您可以选择类.textwidget的所有元素，并使用jQuery隐藏第二个元素（索引1）。

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

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

＆＃13;

// 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';
})

＆＃13;

<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>

＆＃13;

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

4 个答案: