jQuery删除元素的样式或为元素的特定类型添加样式

时间:2018-11-07 17:45:44

标签: javascript jquery for-loop element

我有一个jQuery页面,其中发生了一些事情。所有功能均已完成。唯一未完成的事情是删除每个表的最后一个小时(仅最后一个小时)。我需要知道如何在数组中最后一种特定类型的元素。表中包装的所有元素都是它们自己的数组。我需要遍历每个表,并且只删除每个表在表中的最后一个小时。我尝试了许多方法,但似乎无法获得。我下面的代码仅删除了最后一张桌子的最后一小时。这无法完成我的任务。

jQuery / JavaScript代码(除删除最后一个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>

内部循环(在下面)是我试图用来逐个循环表,然后仅删除表中的最后一个HR的内容。由于某种原因,它无法正常工作。

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

下面是我的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>

1 个答案:

答案 0 :(得分:1)

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

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