使用 jquery 在 6 个图像 url 周围添加动态 div

Question

我需要帮助才能在 mvc razor 视图中渲染从 mysql 数据库中检索到的 6 张图像。图片 1 和 6 分别放在名为“item”的单独 div 中。图片 2,3,4,5 都放在一个名为“item -item-small”的 div 中，下面是原图：

<div class="owl-photos">

    <a href="post.html" class="item-photo">
      <img src="images/photos/image-1.jpg" alt="" />image1
    </a>

    <a href="post.html" class="item-photo">
      <img src="images/photos/image-2.jpg" alt="" />image2
    </a>

    <a href="post.html" class="item-photo">
      <img src="images/photos/image-3.jpg" alt="" />image3
    </a>
    <a href="post.html" class="item-photo">
      <img src="images/photos/image-4.jpg" alt="" />image4
    </a>
    <a href="post.html" class="item-photo">
      <img src="images/photos/image-5.jpg" alt="" />image5
    </a>

    <a href="post.html" class="item-photo">
      <img src="images/photos/image-6.jpg" alt="" />image6
    </a>

  </div>

以下是我想要实现的目标：

<div class ="owl-photos">

<div class="item">  
<a href="post.html" class="item-photo">
<img src="images/photos/image-1.jpg" alt="" />image1
</a>
</div>


<div class="item item-small">
<a href="post.html" class="item-photo">
<img src="images/photos/image-2.jpg" alt="" />image2
</a>
<a href="post.html" class="item-photo">
<img src="images/photos/image-3.jpg" alt="" />image3
</a>
<a href="post.html" class="item-photo">
<img src="images/photos/image-4.jpg" alt="" />image4
</a>
<a href="post.html" class="item-photo">
<img src="images/photos/image-5.jpg" alt="" />image5
</a>
</div>


<div class="item">
<a href="post.html" class="item-photo">
<img src="images/photos/image-6.jpg" alt="" />image6
</a>
</div>
</div>

任何使用 JQuery 的帮助将不胜感激，我不知道如何开始。我可以向第一个元素添加类，但这是一个很大的挑战

尝试使用以下代码：

$(".owl-photos>div:nth-child(1n)").before("<div class="item">");
$(".owl-photos>div:nth-child(1n)").after("</div><div class="item item-small">");
$(".owl-photos>div:nth-child(1n)").after("<div class="item item-small">");
$(".owl-photos>div:nth-child(5n)").after("</div><div class="item ">");
$(".owl-photos>div:nth-child(6n)").after("</div>");

Answer 1

$(function () {
  var $result = $('<div class="owl-photos"></div>');

  var length = $('.owl-photos a').length;

    $('.owl-photos a').each(function (key, item) {
    if (key == 0 || key == length - 1) {
      var $div = $('<div class="item"></div>').append(item);
      $result.append($div);
    } else {
      var $small = $result.find('.item-small');
      console.log($small);
      if (!$small.length) {
        var $div = $('<div class="item item-small"></div>').append(item);
        $result.append($div);
      } else {
        $small.append(item);
      }
    }
  });

  $('.owl-photos').html($result.html());
});

https://jsfiddle.net/atw4gwrr/

Answer 2

您可以使用 JavaScript 创建元素，将特定元素附加到它们，然后将新元素放入 .owl-photos。通过将 <a> 元素附加到新创建的 <div>s 中，它们会从之前的位置移出，这就是为什么您看不到它们重复的原因。

下面，我得到了孩子的列表，然后将它们分组：

• .first() 子元素放在 <div class="item"> 中，然后附加
• :not(:first-child) 和 :not(:last-child) 元素放在 <div class="item item-small"> 中，然后附加
• .last() 子元素放在 <div class="item"> 中，然后附加

$(function(){
  var $photos = $('.owl-photos'),
      $childs = $photos.children(),
      $itemWrapper = $(document.createElement('div')).attr('class','item'),
      $itemSmallWrapper = $(document.createElement('div')).attr('class','item item-small');
  $photos.append(
    $itemWrapper.clone().append($childs.first()),
    $itemSmallWrapper.clone().append($childs.filter(':not(:first-child), :not(:last-child)')),
    $itemWrapper.clone().append($childs.last())
  );
})

.item { border: 3px solid green }
.item.item-small { border: 3px solid blue }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="owl-photos">
    <a href="post.html" class="item-photo">
      <img src="http://placehold.it/100x100&text=1" alt="" />image1
    </a>
    <a href="post.html" class="item-photo">
      <img src="http://placehold.it/100x100&text=2" alt="" />image2
    </a>
    <a href="post.html" class="item-photo">
      <img src="http://placehold.it/100x100&text=3" alt="" />image3
    </a>
    <a href="post.html" class="item-photo">
      <img src="http://placehold.it/100x100&text=4" alt="" />image4
    </a>
    <a href="post.html" class="item-photo">
      <img src="http://placehold.it/100x100&text=5" alt="" />image5
    </a>
    <a href="post.html" class="item-photo">
      <img src="http://placehold.it/100x100&text=6" alt="" />image6
    </a>
  </div>