Блог

Главная - Вопросы по программированию - Добавить список к каждому div по порядку

Добавить список к каждому div по порядку

#javascript #jquery

#javascript #jquery

Вопрос:

Добавить список к каждому div по порядку. У меня есть список имен, созданных динамически:

   <ul id="myList">
    <li>
      <h2>Name 1<br>
      Description</h2>
    </li>
    <li>
      <h2>Name 2<br>
      Description</h2>
    </li>
    <li>
      <h2>Name 3<br>
      Description</h2>
    </li>
  </ul>

И я хочу, чтобы каждый из них li был приложением к .photo ним, как бы я это сделал?

   <div id="myCanvas">
    <div class="photo">
      <img src="./app/img/pinturas-1.png"/>
      <h2>Name 1<br>
      Description</h2>
    </div>
    <div class="photo">
      <img src="./app/img/pinturas-2.png"/>
      <h2>Name 2<br>
      Description</h2>
    </div>
    <div class="photo">
      <img src="./app/img/pinturas-3.png"/>
      <h2>Name 3<br>
      Description</h2>
    </div>
  </div>

Обновил мой вопрос.
Это то, чего я хочу добиться, созданное динамически:

   <div id="myCanvas">
    <div class="photo">
      <img src="./app/img/pinturas-1.png"/>
      <h2>Name 1<br>
      Description</h2>
    </div>
    <div class="photo">
      <img src="./app/img/pinturas-2.png"/>
      <h2>Name 2<br>
      Description</h2>
    </div>
    <div class="photo">
      <img src="./app/img/pinturas-3.png"/>
      <h2>Name 3<br>
      Description</h2>
    </div>
  </div>

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

1. Вы хотите, чтобы li сортировался на основе имени? вы пробовали что-нибудь со своей стороны?

2. @BhushanKawadkar Нет, просто по порядку: первый, второй, третий и так далее…

3. можете ли вы опубликовать ожидаемый результат html, чтобы понять, что именно вы запрашиваете?

Ответ №1:

Вы можете использовать приведенную ниже логику для перехода li к соответствующему div индексу. Вы можете перебрать все div и получить индекс, найти дочерний элемент li с соответствующим индексом и добавить его в div.

 $(function(){
  $('#myCanvas .photo').each(function(){
     var index = $(this).index();
     //console.log($('#myList li:eq('   index  ')').html());
     //console.log(index);
     var $child = $('#myList li:eq('   index  ')').children();
     $(this).append($child);
  });
});  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="myList">
    <li>
      <h2>Name 1<br>
      Description</h2>
    </li>
    <li>
      <h2>Name 2<br>
      Description</h2>
    </li>
    <li>
      <h2>Name 3<br>
      Description</h2>
    </li>
  </ul>
  <div id="myCanvas">
    <div class="photo">
      <img src="./app/img/pinturas-1.png"/>
    </div>
    <div class="photo">
      <img src="./app/img/pinturas-2.png"/>
    </div>
    <div class="photo">
      <img src="./app/img/pinturas-3.png"/>
    </div>
  </div>

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

1. рад вам помочь 🙂