Enhance the appearance of 6 image URLs by wrapping them in dynamic divs with the

Question

Enhance the appearance of 6 image URLs by wrapping them in dynamic divs with the

Can someone assist me in displaying 6 images retrieved from a MySQL database on an MVC Razor view? Images 1 and 6 should be placed in separate divs labeled "item", while images 2, 3, 4, and 5 should be grouped together in a div called "item-small". Below is the current rendering:

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

Here is what I am aiming for:

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

I would appreciate any assistance in using jQuery to achieve this. I am having trouble finding a starting point. Adding classes to the first element seems particularly challenging.

I have attempted the following code:

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

javascript jquery css asp.net-mvc-4 razor

Answer 1

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

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

Answer №2

If you want to dynamically create elements using JavaScript, you can do so by appending specific elements and then inserting the newly created elements into the .owl-photos container. When you append the <a> elements to the new <div> containers, they are effectively moved from their original location, preventing any duplication.

In the example below, I first retrieve the list of child elements and group them as follows:

The first child is wrapped in a <div class="item"> container and appended.
The elements that are not the first or last child are wrapped in a
```
<div class="item item-small">
```
container and appended.
The last child is wrapped in a <div class="item"> container and appended.

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

Answer 4

If you want to dynamically create elements using JavaScript, you can do so by appending specific elements and then inserting the newly created elements into the .owl-photos container. When you append the <a> elements to the new <div> containers, they are effectively moved from their original location, preventing any duplication.

In the example below, I first retrieve the list of child elements and group them as follows:

The first child is wrapped in a <div class="item"> container and appended.
The elements that are not the first or last child are wrapped in a
```
<div class="item item-small">
```
container and appended.
The last child is wrapped in a <div class="item"> container and appended.

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

Enhance the appearance of 6 image URLs by wrapping them in dynamic divs with the

Answer №1

Answer №2

Similar questions

FireFox appears to be experiencing issues with accessing the contentDocument of a frame using jQuery

The ajaxStart event does not seem to be triggering when clicked on

Update the content of the widget

Using customized CSS code may not always be compatible with Bootstrap 5

Tips for resizing images to fit within a TD cell in an HTML table

No matter what I try, the design of my dialog box remains stubbornly unchanged

I am experiencing an issue with the functionality of Handlebars registerPartial()

Error occurs when page rendering is stuck in a recursive loop: Excessive re-renders detected

Tips for restricting camera movement in threejs

Vue3 is struggling to apply dynamic styling exclusively to certain buttons

Troubleshooting jQuery.ajax - Why won't it function properly?

ES6 import of CSS file results in string output instead of object

Why do my tablet media queries take precedence over mobile view media queries?

While utilizing a dynamic PHP navigation header, the nested divs are shifting below the container div

Tips for sending a PHP array to jQuery AJAX using the $.post method

Vue component updating its model only upon input element losing focus

Passing props from pages to components in NextJS: A guide

What is the best way to manage a promise in Jest?

Combine a variable and a string to create a new variable

What is the best way to incorporate a custom modal created with HTML/CSS into my Bootstrap website?