Ad

Add Dynamic Divs Around 6 Image Urls Using Jquery

I need help to render 6 images retrieved from mysql database in mvc razor view. Images 1 and 6 are put in their separate divs called "item". Images 2,3,4 and 5 are all put in one div called "item -item-small" Below is the original rendering:

<div class="owl-photos">

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

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

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

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

  </div>

Below is what I want to achieve:

<div class ="owl-photos">

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


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


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

Any help in using JQuery will be appreciated I do not know how to start this. I can add classes to first element but this is a big challenge

Attempted with the code below:

$(".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>");
Ad

Answer

$(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/

Ad
source: stackoverflow.com
Ad