Блог

Главная - Вопросы по программированию - Перебирать элементы и переносить элементы в div-контейнер, используя jquery для каждой функции

Перебирать элементы и переносить элементы в div-контейнер, используя jquery для каждой функции

#javascript #loops #each

#javascript #циклы #каждый

Вопрос:

Мой Html

 <div class="loop">
<article>1<article>
<article>2<article>
<article>3<article>
<article>4<article>
<article>5<article>
<article>6<article>
</div>

Мой JS:

  $('.loop').find('article').each(function (index, section) {
            if ( index < 3) {
                      
                // code here 

        }
   })

Я понятия не имею, как это решить:

Я хочу перебрать эти элементы и обернуть элемент 1,2,3 с помощью div. Также элементы 4,5,6 и 7,8,9 (если есть больше элементов)

Мой желаемый Html-код будет:

 <div class="loop">
<div="newContainer">
    <article>1<article>
    <article>2<article>
    <article>3<article>
</div>
<div="newContainer">
    <article>4<article>
    <article>5<article>
    <article>6<article>
</div>
</div>

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

1. Что вы делаете с <div=»newContainer»>? Вы имели в виду <идентификатор div=»newContainer»>?

Ответ №1:

Я пишу решение для вас:

 $('.loop').find('article').each(function (index, section) {
    if(index % 3 ===0)
     {
       $('.loop').append($('<div>'));
     }
     $('.loop').children(`div:nth-of-type(${Math.floor(index/3) 1})`).first().append(section);
})

вот полный пример:
https://jsfiddle.net/t40ujrbs /

Ответ №2:

Другим способом, которым вы могли бы это сделать, было бы также использовать wrapAll inside of your each .

 var article = $('article');

$.each(article, function (index, section) {
  if (index % 3 === 0) {
    $(article).slice(index, index   3).wrapAll("<div class='new-div'>Test text</div>");
  };
});  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="loop">
  <article>1</article>
  <article>2</article>
  <article>3</article>
  <article>4</article>
  <article>5</article>
  <article>6</article>
</div>

Ответ №3:

Если вы предпочитаете более длинное, но более простое для понимания решение, вы можете сделать это.

 $(document).ready(()=>{
  let newDiv = $("<div>");
  let generalId=1, ctrl=3;
  let dv = $("<div>");
  dv.attr("id", "new-container" generalId);
  let oldDiv=$(".loop");

  oldDiv.find("article").each(function (index, article) {
    ctrl--;
    dv.append(article);

    if(ctrl==0) {// if ctrl==0, we will append to new main div
      newDiv.append(dv);
      generalId  ;
      dv = $("<div>");
      dv.attr("id", "new-container" generalId);
      ctrl=3;
    }
  });
  if(ctrl>0) newDiv.append(dv);
  oldDiv.html(newDiv.html());
});  
 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
</head>
<body>
  <div class="loop">
    <article>1</article>
    <article>2</article>
    <article>3</article>
    <article>4</article>
    <article>5</article>
    <article>6</article>
    <article>7</article>
  </div>
</body>
</html>

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

1. Большое спасибо! Очень полезно!

2. @Milenoi, я рад узнать, что это полезно. Можете ли вы проголосовать, чтобы помочь другим людям? Спасибо!

3. К сожалению, я не могу этого сделать — я получаю это сообщение: «Спасибо за отзыв! Голоса, поданные теми, у кого репутация менее 15, записываются, но не меняют публично отображаемую оценку публикации «. Извините за это; (