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

The redirection did not occur as no authorization token was detected

I have two Nodejs applications, one for the front-end and the other for the back-end. The back-end app is secured with token access using express-jwt and jsonwebtoken middlewares. My issue is as follows: when I make a request from the front-end to the bac ...

javascriptnode.jsexpressjwtexpress-jwt

Can the parcel bundler dist folder be customized for decoration?

After compiling code with parcel using the command parcel src/index.html, all files are generated inside the dist folder. However, I am looking for a more organized way to manage these files once my website is complete. Ideally, I want separate folders suc ...

javascriptnpmbundlerparceljs

Protractor tests are successful when run locally, but encounter failures when executed on Travis-CI

I recently integrated end-to-end tests using Protractor into my AngularJS application. Testing them locally showed that they all pass, but upon committing to GitHub and Travis for CI, most of the tests fail. The failing tests seem to be those requiring na ...

javascriptangularjsprotractortravis-ciangularjs-e2e

Tips for sending a PHP variable to a jQuery tooltip with the help of Ajax

I'm facing an issue with the event_id PHP variable in the current page. I need to display it in a jQuery tooltip using AJAX, but I keep getting an error that the event_id is not defined. Here's the jQuery file with the tooltip function: functio ...

jqueryajaxlaravel

What is the best way to ensure that a React app is always displayed in full screen

I am facing an issue while developing an app with React and Material UI. I am trying to display the app in full-page mode, but unable to achieve it successfully. Currently, it appears like this: Here is my code snippet from App.js: import 'typeface- ...

javascripthtmlcssreactjsmaterial-ui

Guide to launching my application by clicking on a file from a local device using React Native

Currently, I am working with React Native and Expo. I have a file with a unique extension (let's say: SomeFileName.xxx) which contains some text. My goal is to open this file from the device in such a way that it launches the application (either on An ...

javascriptreactjsreact-nativeexpo

Prevent the routing on page reload in AngularJS

My route provider setup looks like this: app.config(function ($routeProvider, $locationProvider){ $locationProvider.hashPrefix(''); $routeProvider .when('/', { templateUrl: 'login.html', controller: 'loginCtrl&a ...

htmlangularjsangular-routingroute-provider

No results found by Mongoose find() method

I've set up a route that utilizes a model named Todo as shown below: app.get('/api/todos', function(req, res) { Todo.find({},function(err, todos) { if (err) res.send(err); console.log("number of todos " + tod ...

javascriptnode.jsmongodbmongoose

Having difficulty including my JavaScript file located in /app/assets/javascripts when using Rails 4 and "//= require_tree ." in application.js

I'm currently attempting to implement a d3.js graph into my Rails 4 application by following a tutorial found on this website. The example application provided on GitHub works perfectly as expected. The issue I am facing is that when I try to recreat ...

javascriptruby-on-railsruby-on-rails-4d3.jsasset-pipeline

Tips for handling an incorrect date entry when a field loses focus in AngularJS

If I have an <input> field with the type='date' attribute in its untouched state, it displays mm/dd/yyyy as the date format. I am looking to see if there is a way to utilize AngularJS ng-blur directive to reset the field to this original fo ...

javascriptangularjshtmldate

Encountering the error message "Angular 'undefined is not a function' when trying to define a component

My Ionic code was originally working fine, allowing the user to input a list. I decided to refactor it into a component for re-usability but encountered an error undefined is not a function on line 4 of the Javascript file. How can this issue be resolved? ...

javascriptangularjs

Centering text in a D3 donut chart

Struggling with centering text inside a d3 donut chart for a project. While trying to modify a piece of code, I find myself lost in the complexity of it. Despite my efforts, the text added to the center is not perfectly centered. I have attempted various ...

javascriptcssd3.jsdonut-chart

When utilizing CKEditor in conjunction with ExpressJS, HTML tags may be displayed in the browser

Check out my app.js code below: <!DOCTYPE html> <html lang="en> <head> <meta charset="UTF-8> <meta name="viewport" content="width=device-width, initial-scale=1.0> <meta http-equiv="X-UA-Compatible" content="ie= ...

javascriptnode.jsformsexpressckeditor

Is there a way to do HTML select-option in a reversed order?

Having an issue with my HTML select element: <select> <option>...</option> <option>...</option> <option>...</option> </select> Currently, all the options are displayed below the select field. I ...

htmlpopup

Why isn't the alert box showing up when I use this Jquery function?

It has come to my attention that when I include the ready event, the function works properly. However, upon removing it, the function ceases to work. Functionality with Ready Event: <script type="text/javascript"> $(document).ready( functi ...

jquery

Refresh the contents of the DataTable using ajax

I am currently using DataTables with AJAX to generate a table on page load. The initial part of my code is working correctly. However, I have encountered an issue when trying to filter users in the DataTable using a dropdown. After selecting a username a ...

jqueryjsonajaxasp.net-mvcdatatable

How can I update the chartjs instance?

I am currently working on creating a reactive graph that updates based on certain values. However, I am running into issues where my computed ChartData() function is not updating the component as expected. I have tried using the update() function, but I am ...

javascriptvue.jschart.js

Issue with VueJs router-link component

Whenever I click on a vuejs router-link element in my app.blade.php page navigation bar, I keep seeing an error in my console which is displayed below [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent comp ...

javascriptlaravelvue.jsrouterlink

Is there a way to convert the structure of HTML/CSS into JSON format?

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .collapsible { background-color: #004c97; color: white; cursor: pointer; padding: 18px; width: 100%; border: none; text ...

cssjsonhtml

Exploring advanced slot functionality in VuetifyJS through autocomplete integration with Google Places API

How can I make VuetifyJS advanced slots work seamlessly with the Google Places API? Currently, some addresses appear in the autocomplete dropdown only after clearing the input text by clicking the "x" icon in the form field. To see the problem in action, ...

javascriptvue.jsgoogle-places-apivuetify.jsgoogle-places