简体   繁体   中英

jQuery remove or add style to last of specific type of element

I have a jQuery page that has a few things going on. All of the functionalities are complete. The only thing that's not complete is removing the last hr (only the last one) of each table. I need to know how to the last of a specific type of element in an array. All the elements that are wrapped in the tables are their own array. I need to loop through each of those tables and only remove the last hr in the table for each table. I've tried many methods and can't seem to get it. The code I have below only removes the last hr for the last table. This doesn't complete my task.

jQuery/ JavaScript Code (Everything works except for removing the last HR)

<script>
$(document).ready(function(){
  var H2SingerTitles = $("h2.toggleSinger");
  for (i = 2; i < H2SingerTitles.length; i++) {
    var currentH2Singer = H2SingerTitles[i];
    var siblingsofH2Singer = 
    $(currentH2Singer).nextUntil("h2.toggleSinger");
    $(siblingsofH2Singer).wrapAll("<table></table>");
    for (j = 0; j < siblingsofH2Singer.length; j++) {
      $("hr").last().css("border-top", "none");
    } // line ends for loop with j counter
  } // line ends for loop with i counter 
  togglerHeaders.slice(0,2).removeClass("toggleSinger");
  $(".toggleSinger").next().hide();
  $(".toggleSinger").click(function(){
    $(".toggleSinger").next().toggleClass();
  });
}); 
</script>

The inner loop (which is below) is what I'm trying to use to loop through the tables one by one then remove only the last HR in the table. For some reason it's not working.

for (j = 0; j < siblingsofH2Singer.length; j++) {
  $("hr").last().css("border-top", "none");
} // line ends for loop with j counter

Below is my HTML

<div id="mainPage">
  <h2 class=""><span class="title">Whitney Houston</span></h2>
  <div class="aboutInfo">
    <img src="whitney_houston.jpg" height="150">
    <a href="www.whitneyhouston.com" target="_blank"><h3><em>The Voice</em> 
    </h3></a>
    <h3>Worldwide Famous Vocalist, Singer and Performer</h3> 
    <p>I will always love you</p>
    <br>
    <hr>
  </div> 

  <h2 class=""><span class="title">Mariah Carey</span></h2>
  <div class="aboutInfo">
    <img src="mariah_carey.jpg" height="150">
    <a href="www.mariahcarey.com" target="_blank"><h3><em>Whistle 
    Register</em></h3></a>
    <h3>Worldwide Famous Vocalist, Singer and Performer</h3> 
    <p>Hero</p>
    <br>
    <hr>
  </div>

  <h2 class="toggleSinger"><span class="title">Michael Jackson</span></h2>
  <table style="display: none;">
    <div class="aboutInfo">
      <img src="michael_jackson.jpg" height="150">
      <a href="www.michaeljackson.com" target="_blank"><h3><em>King of
      Pop</em></h3></a>
      <h3>Worldwide Superstar Singer, Dancer and Performer</h3> 
      <p>Billie Jean</p>
      <br>
      <hr>
    </div>
    <div class="aboutInfo">
      <img src="jackson_5.jpg" height="150">
      <a href="www.jackson5.com" target="_blank"><h3><em>The Jackson 5</em> 
      </h3></a>
      <h3>Worldwide Famous R and B Group</h3> 
      <p>ABC</p>
      <br>
      <hr>
    </div>
  </table>

  <h2 class="toggleSinger"><span class="title">Diana Ross</span></h2>
  <table style="display: none;">
    <div class="aboutInfo">
      <img src="diana_ross.jpg" height="150">
      <a href="www.dianaross.com" target="_blank"><h3><em>The Original 
      Diva</em></h3></a>
      <h3>Worldwide Superstar Singer</h3> 
      <p>I'm coming out</p>
      <br>
      <hr>
    </div>
    <div class="aboutInfo">
      <img src="diana_ross.jpg" height="150">
      <a href="www.dianaross.com" target="_blank"><h3><em>The Supremes</em> 
      </h3></a>
      <h3>Worldwide Famous Girl Group</h3> 
      <p>Stop in the name of love</p>
      <br>
      <hr>
    </div>
  </table>

  <h2 class="toggleSinger"><span class="title">Lionel Richie</span></h2>
  <table style="display: none;">
    <div class="aboutInfo">
      <img src="lionel_richie.jpg" height="150">
      <a href="www.lionelrichie.com" target="_blank"><h3><em></em></h3></a>
      <h3>Worldwide Superstar Singer and Pianist</h3> 
      <p>All night long</p>
      <br>
      <hr>
    </div>
    <div class="aboutInfo">
      <img src="diana_ross.jpg" height="150">
      <a href="www.dianaross.com" target="_blank"><h3><em>The Commodores</em> 
      </h3></a>
      <h3>Worldwide Famous Group and Band</h3> 
      <p>Brickhouse</p>
      <br>
      <hr>
    </div>
  </table>

  <h2 class="toggleSinger"><span class="title">Smokey Robinson</span></h2>
  <table style="display: none;">
    <div class="aboutInfo">
      <img src="smokey_robinson.jpg" height="150">
      <a href="www.smokeyrobinson.com" target="_blank"><h3><em></em></h3></a>
      <h3>Worldwide Singer and Songwriter</h3> 
      <p>Cruising</p>
      <br>
      <hr>
    </div>
    <div class="aboutInfo">
      <img src="the_miracles.jpg" height="150">
      <a href="www.themiracles.com" target="_blank"><h3><em>The Miracles</em> 
      </h3></a>
      <h3>Worldwide Famous R and B Group</h3> 
      <p>Ooh Baby Baby</p>
      <br>
      <hr>
    </div>
  </table>
</div>

如果您要删除每个表上的最后一个HR,则不需要for循环,请尝试此操作。

$("table").each(function(){ $(this).find("hr").last().remove(); });

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM