Как найти последний элемент HTML, хранящийся в массиве - PullRequest
Новая
       12

Как найти последний элемент HTML, хранящийся в массиве

0 голосов
/ 02 ноября 2018

У меня есть страница, на которой есть несколько родственных элементов. Я делаю несколько вещей с элементами. Первое, что я сделал успешно, это сохранил элементы одного уровня в таблицах в соответствии с тем, в каком году они находятся. У каждого года есть куча div, p и hr. Для самого последнего деления каждого года секции я должен убрать метку HR. Я пытался использовать метод .last(), но он не работает. Может ли кто-нибудь помочь мне, не меняя весь мой код. 

<script>  
$(document).ready(function(){
var togglerHeaders = $("h2.toggler");
    for (i = 2; i < togglerHeaders.length; i++) {
  var currentH2Element = togglerHeaders[i];
  var siblingsofH2 = $(currentH2Element).nextUntil("h2.toggler");
    $(siblingsofH2).wrapAll("<table></table>");
        $("hr").last().css("display", "none");
    } // line ends for loop
    togglerHeaders.slice(0,2).removeClass('toggler');
    $(".toggler").next().hide();
$(".toggler").click(function(){
  $(".toggler").next().toggleClass();
});
}); 
</script>

После того, как я помещаю братьев и сестер из текущей H2 в следующую H2 в таблицу, я пытаюсь нацелиться на эту таблицу, чтобы получить последнюю H2 в этой таблице и установить для нее display:none.

HTML

* HTML представляет, когда братья и сестры фактически находятся в таблице, и теперь я пытаюсь удалить только последний тег HR для каждой таблицы. 

<table>   
<div class="box">
<h3>Roses</h3> 
<p>Red, White, Black</p>
</hr>
</div>
<div class="box">
<h3>Tulips</h3> 
<p>White, Pink, Yellow</p>
</hr>
</div>
<div class="box">
<h3>Dandelions</h3> 
<p>Yellow</p>
</hr>
</div>
<div class="box">
<h3>Lillies</h3> 
<p>Pink, White, Blue</p>
</hr>
</div>
</table>
<table>   
<div class="box">
<h3>Apples</h3> 
<p>Red, Yellow, Granny Smith</p>
</hr>
</div>
<div class="box">
<h3>Carrots</h3> 
<p>Orange, Rainbow, Baby</p>
</hr>
</div>
<div class="box">
<h3>Lettuce</h3> 
<p>Green leaf, Red leaf, Romaine</p>
</hr>
</div>
<div class="box">
<h3>Peppers</h3> 
<p>Green, Red, Yellow</p>
</hr>
</div>
</table>
<table>   
<div class="box">
<h3>Dogs</h3> 
<p>Jack Russell, Poodle, Pit bull</p>
</hr>
</div>
<div class="box">
<h3>Fish</h3> 
<p>gold, rainbow, salmon</p>
</hr>
</div>
<div class="box">
<h3>Birds</h3> 
<p>humming bird, bluebird, robin</p>
</hr>
</div>
<div class="box">
<h3>Butterflies</h3> 
<p>Black, Yellow, White</p>
</hr>
</div>
</table>

1 Ответ

0 голосов
/ 02 ноября 2018

Итак, проблема в том, что вы используете table, но не используете теги table (tr, td и т. Д.). Вот почему это выходит за пределы стола. Просто замените тег table на div. 

$(document).ready(function() {
  var togglerHeaders = $("h2.toggler");
  for (i = 2; i < togglerHeaders.length; i++) {
    var currentH2Element = togglerHeaders[i];
    var siblingsofH2 = $(currentH2Element).nextUntil("h2.toggler");
    $(siblingsofH2).wrapAll("<div class='container'></div>");
  } // line ends for loop
  togglerHeaders.slice(0, 2).removeClass('toggler');
  $(".toggler").next().hide();
  $(".toggler").click(function() {
    $(".toggler").next().toggleClass();
  });

  var tables = $(".container");

  tables.each(function(index, table) {
    console.log($(table).find("div").last());
    //$(table).find("hr").last().replaceWith("*".repeat(80)); 
    $(table).find("hr").last().hide(); 
  })
});
...