The :first selector examines the parent's parent as a reference point, rather than the immediate

I am facing a challenge with shuffling large elements within my layout because of floating them and attempting to display them. Specifically, the elements with the class .gallery-large always need to be the first child inside the .item container. There are multiple .item containers within the main #gallery_slideshow. Currently, when there is a large item inside the second, third, etc. item, it gets placed as the first element inside the first item, but I want it to remain in its own position. For instance, the code below results in 5 elements inside the first .item with 2 large ones, instead of the initial 4 elements with 1 large one.

JS:

if($('.gallery-item').length > 1) {
        $('.gallery-large').each(function(e) {
          if(!$(this).is(':first')) {
            $(this).insertBefore('.gallery-item:first');
            //Reset height of owl carousel wrapper in case moved element was last
            $('.owl-wrapper-outer').css('height', 'auto');
          }
        });
      }

HTML:

<div id="gallery_slideshow" class="owl-carousel owl-theme">
              <!-- Example page 1 -->
              <div class="item row">
                <div class="col-md-2 col-sm-3 col-xs-12 gallery-item gallery-small">
                  <div class="gallery-image" style="background-image: url(http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg)"></div>
                </div>

                <div class="col-md-2 col-sm-3 col-xs-12 gallery-item gallery-small">
                  <div class="gallery-image" style="background-image: url(http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg)"></div>
                </div>

                <div class="col-md-4 col-sm-6 col-xs-12 gallery-item gallery-medium">
                  <div class="gallery-image" style="background-image: url(http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg)"></div>
                </div>

                <div class="col-md-8 col-sm-6 col-xs-12 gallery-item gallery-large right">
                  <div class="gallery-image" style="background-image: url(http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg)"></div>
                </div>
              </div>

              <!-- Example page 2 -->
              <div class="item row">
                <div class="col-md-2 col-sm-3 col-xs-12 gallery-item gallery-small">
                  <div class="gallery-image" style="background-image: url(http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg)"></div>
                </div>

                <div class="col-md-2 col-sm-3 col-xs-12 gallery-item gallery-small">
                  <div class="gallery-image" style="background-image: url(http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg)"></div>
                </div>

                <div class="col-md-4 col-sm-6 col-xs-12 gallery-item gallery-medium">
                  <div class="gallery-image" style="background-image: url(http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg)"></div>
                </div>

                <div class="col-md-8 col-sm-6 col-xs-12 gallery-item gallery-large right">
                  <div class="gallery-image" style="background-image: url(http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg)"></div>
                </div>
              </div>

            </div><!-- END #gallery_slideshow -->
javascriptjqueryhtmlcss

Answer №1

To achieve this, you can follow these steps:

$(".gallery-large").each(function() {
  $(this).parent().prepend(this);
});
  1. Cycle through each element with the class 'gallery-large'
  2. Use the prepend() method to move it to the beginning as the first child of its parent, maintaining the proper context.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Achieving consistent outcomes across various devices: What's the secret?

Hey there, I am facing an issue with my form page that I created using HTML, CSS, and Javascript. It looks good on my computer but appears messy on a mobile phone. The elements are getting out of the white box (div) making the entire page look chaotic. Sin ...

javascripthtmlcss

Utilizing express.js alongside the native MongoDB driver: A comprehensive guide

I'm facing difficulties when attempting a simple mongoDB query from my express app: app.js var express = require('express'); var routes = require('./routes'); var user = require('./routes/user'); var http = re ...

javascriptmongodbexpress

What is the procedure to reduce my final search result by 1?

When the search is triggered, I want to filter the images by name. However, the issue arises when trying to make everything disappear on filter addition. <ul id="list2"> <li class="in2"> An extra number is added ...

javascripthtmljquerycssajax

Is there a way to remove a checkbox node that has already been generated?

I've been working on creating a to-do list, and I've run into an issue with deleting the checkbox once the task is complete. I attempted to create a function within the main function containing an if/else statement, but it didn't seem to wo ...

javascripthtmldom

What is the process for setting up a banner on one page that will automatically be reflected on all other pages?

Is there a way to have a banner in a div and display it on the home page so that it automatically appears on all other pages without needing to place the code on each page individually? Any assistance would be greatly appreciated :) ...

javascriptphphtmlcss

JavaScript: Populating an Array with Image URLs Using a Loop

My image gallery project has hit a roadblock and my JavaScript skills are not up to par. Maybe it's time to brush up on the basics with a good book from the library. Here's what I want to achieve: 1. Create an array of URL's for each imag ...

javascripthtmlarraysimagefor-loop

From JSON to JavaScript transformations

Currently, I am attempting to utilize JSON with data retrieved from the server by implementing this PHP script: include("db_connect.php"); mysql_connect($host,$username,$password); @mysql_select_db($database) or die( "Unable to select database"); $resu ...

javascriptajaxjson

Tips for dynamically adjusting an iframe's content size as the browser window is resized

Currently, I am in the process of building a website that will showcase a location on a map (not Google Maps). To achieve this, I have utilized an iframe to contain the map and my goal is for the map to adjust its width based on the width of the browser wi ...

javascriptjqueryhtmlcssiframe

Utilize Vue.js to send bound data to a click event

I am currently working with a v-for loop that iterates over data fetched from an API, setting the key as the ID of each object. My goal is to create a click event that captures the v-bind:key value of the clicked element. This will allow me to locate all t ...

javascriptvue.jsvuejs2vue-component

Ways to connect a button to a Bootstrap 5 tab class

I am trying to find a way to directly link to a specific tab using a Bootstrap 5 button class. I have attempted to incorporate the solution provided in the following resource: Twitter Bootstrap 5 Tabs: Go to Specific Tab on Page Reload or Hyperlink Unfo ...

javascriptjquerybootstrap-5

What is the best way to personalize the collector for each individual?

Currently, I have a bot that is capable of collecting messages and replying if it detects a specific word. However, I am facing an issue where the bot keeps creating new collectors every time someone types the word tekong. As a result, the bot ends up resp ...

javascriptnode.jsdiscord.js

Retrieving the user's Windows username with JavaScript

Is it possible to retrieve the Windows user name solely in Internet Explorer using the code below? function GetUserName() { var wshell = new ActiveXObject("WScript.Shell"); alert(wshell.ExpandEnvironmentStrings("%USERNAME%")); } What methods ...

javascriptjqueryangularjs

What is the reason for the countdown number's color remaining the same even after it reaches a specific time threshold?

Creating a simple countdown for sports was my idea, but now I'm stuck on the "changeColor" part that I don't have enough knowledge about. The countdown is functioning perfectly, but customizing the colors and adding CSS animations seems challeng ...

javascripthtmlcss

Is it possible to have more than one button for each item on my Shopping List App?

I am developing a shopping list app that allows users to add items to a list. Each item added triggers the display of a button next to it, enabling users to remove the item from the list when needed. However, a problem arises as more items are added – i ...

javascriptjqueryhtmlcss

Invoke the prototype function through an onclick event after dynamically adding a button

Within my code, I have created two prototype functions named showPopup and buildView. The buildView function is responsible for generating dynamic HTML that includes a button. My intention is to invoke the showPopup function when this button is clicked. Ho ...

javascript

What is the purpose of passing the Vuex store instance to the Vue constructor parameters?

index.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: {}, getters: {}, mutations: {}, actions: {} }) app.js import Vue from 'vue' import store from &apos ...

javascriptvue.jsvue-componentvuexvue-router

Implementing a try-catch-finally block in Javascript to handle errors during JSON parsing appears to be ineffective

As someone relatively new to web scripting, I find the similarities between Java try-catch blocks and Javascript ones intriguing. However, my attempts at using them have yielded slightly different results than expected. Here is a snippet of code showcasing ...

javascriptphpjsontry-catch

What is the method of aligning content to the left side in a slick slider?

My slider is set up to display three elements, but I'm having trouble aligning one or two elements to the left instead of centering them. jQuery(function () { jQuery('.slider-blog').slick({ arrows: false, dots: true, ...

javascriptcss

Toggle jQuery to hide a div and update its CSS styling

There is an anchor with the class of "hide-btn1" that I want to trigger a series of actions when clicked: The rcol-content should hide and the text should change from Hide to Show The #container width needs to increase to 2038px The table.status-table wi ...

javascriptjqueryhtmlcss

Reading values from a properties file using HTML

Here's a snippet of my HTML code: First name: <input type = "text" > Last name: <input type = "text"> Instead of manually inputting the field values (First name, Last name) in the HTML, I am interested in reading them ...

javascripthtml