Блог

Главная - Вопросы по программированию - Разделение содержимого внутри div с помощью Jquery

Разделение содержимого внутри div с помощью Jquery

#javascript #jquery

#javascript #jquery

Вопрос:

У меня есть следующий HTML:

 <div class="page">
  <div class="somecontent_1">...</div>
  <div class="somecontent_2">...</div>
  <div class="somecontent_3">...</div>
  <div class="somecontent_4">...</div>
</div>

Теперь я хотел бы отделить содержимое отдельной страницей, чтобы оно выглядело примерно так:

 <div class="page">
  <div class="somecontent">...</div>
  <div class="somecontent">...</div>
</div>
<div class="newpage">
  <div class="somecontent">...</div>
  <div class="somecontent">...</div>
</div>

Функция проверяет высоту каждого класса somecontent , и если она превышает определенное значение, мне нужно переместить содержимое на новую страницу.
Я предполагаю, что мне нужно будет создать пустой div (newpage), а затем извлечь элементы после превышения высоты и переместить их на пустую newpage и продолжить итерацию таким образом.

Мой вопрос заключается в том, как я мог бы получить все содержимое, которое находится после последнего элемента, достигшего высоты, чтобы я мог переместить его на новую пустую страницу, которую я бы создал. Другие решения приветствуются, если есть лучший способ сделать это!

Код, который я придумал, выглядит следующим образом:

     var page = $('.page');
    var pageHeight = 0;
    $.each(page.find('.somecontent'), function() {
      if (pageHeight > 1000) {
        page.next('<div class="newpage"></div>');
        /* Somehow get all elements to add to the newly created page */
        page.next('.newpage').append(<NEXT_ELEMENTS>);
        pageHeight = 0;
      }
      pageHeight = pageHeight   $(this).height();
    });

Комментарии:

1. Что означает перенос содержимого под ним в виде новой страницы ? «Страница» как в HTML-документе?

2. Извините, страница, на которую я ссылаюсь, — это составленная страница формата А4 для пользователя, а не HTML-документ 🙂 Например, как страница Google doc формата А4.

Ответ №1:

Когда вы дойдете page до того, что соответствует критерию высоты, используйте .nextAll функцию, чтобы получить все ее последующие аналоги, а затем используйте .wrapAll , чтобы обернуть их своим newpage div .

Вот соответствующая документация nextAll и wrapAll, в ней есть все, что вам нужно для вашего сценария.

Ответ №2:

Смотрите Комментарии в строке ниже.

 // Instead of the $.each() utiility function
// Just loop over each content area that needs
// examination
$('.somecontent').each(function(index, item) {
  // Check if the height of the item is greater than the target (20px for this example)
  if (parseInt(getComputedStyle(item).height,10) > 20) {
    // Make a new div after the div that the item is currently in
    // if one doesn't already exist
    if($(".newpage").length === 0){
      $(item.closest(".page")).after('<div class="newpage"></div>');
    }
    // Move the item into the new div
    $(item.closest(".page")).next('.newpage').append(item);
  }
});

//console.log(document.body.innerHTML);  // shows resulting HTML  
 div.page {border:1px solid red; }
div.newpage {border:1px solid green; }  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="page">
  <div class="somecontent">This<br>is<br>some<br>content</div>
  <div class="somecontent">This is some content</div>
  <div class="somecontent">
    <ul>
      <li>This</li>
      <li>is</li>
      <li>some</li>
      <li>content</li>     
    </ul>
  </div>
  <div class="somecontent">Other</div>
</div>