javascript - Hide second element with same class or id - Stack Overflow

admin管理员组

文章数量:1379944

I have double code in 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=".png" alt="treat_someone"></div>
        </section>
    </div>
</div>

I have tried everything from WP backend and decided to use css + JavaScript to solve this. I want to only show the first top-banner. Here is the code to hide it:

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

When I put that code onto my WP page, both banners disappear not just second.

How can I only hide the second banner and not the first?

I have double code in 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./wp-content/uploads/2017/03/treat_someone-1.png" alt="treat_someone"></div>
        </section>
    </div>
</div>

I have tried everything from WP backend and decided to use css + JavaScript to solve this. I want to only show the first top-banner. Here is the code to hide it:

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

When I put that code onto my WP page, both banners disappear not just second.

How can I only hide the second banner and not the first?

• javascript
• html
• css
• wordpress

Share Improve this question Follow edited Mar 20, 2017 at 18:07 mccoyLBI 1711414 bronze badges asked Mar 20, 2017 at 16:05 Aleks PerAleks Per 1,63977 gold badges3838 silver badges7474 bronze badges 3

• I can only see one banner image in this HTML code – Simrandeep Singh Commented Mar 20, 2017 at 16:09
• yes but I have this code 2 times in home page ... – Aleks Per Commented Mar 20, 2017 at 16:11
• it's because your .textwidget div is the first of it's type in the .widget div. If you want a css solution, we need to see where your second banner is in relation to your first, otherwise I would use a js solution – Pete Commented Mar 20, 2017 at 16:13

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 1

nth-of-type works on siblings, in other words, they need to be children of the same parent. If they are in different parents in the page, nth- won't work. You could select all elements with class .textwidget and hide the second one (index 1) with jQuery.

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

Edit: ...or you could use 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./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./portrait/58832_300x300"
               alt="treat_someone"></div>
      </section>
    </div>
  </div>

nth-of-type : selector matches every element that is the nth child, of a particular type, of its parent. Here us the code which is hiding 2nd element of .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>

In Plain javascript, try

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

You are using wrong CSS. I have modified your CSS code, it will work for you.

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

本文标签： javascriptHide second element with same class or idStack Overflow