Question

我需要帮助在mvc razor视图中渲染从mysql数据库中检索到的6个图像。图像1和6放在称为“项目”的单独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>，它们会从之前的位置移动，这就是您没有看到它们重复的原因。

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

.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>

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

2 个答案: