Rearrange the position of the divs in every other container

Assume that I have the following HTML structure:

<div class="article">
 <div class="article_img"></div>
 <div class="article_preview"></div>
</div>

Both article_img and article_preview elements have a defined width and height, along with position: relative and float: left; properties to align them next to each other.

While I am aware that I can swap article_img with article_preview using $

(".article_preview").before($("article_img"));
, how can I specifically do this for every odd article element?

jqueryhtmlcssswitch-statement

Answer №1

To accomplish this task, you can utilize CSS alone:

div.post:nth-child(even) div.post_image {
    float:right;
}

Alternatively, if jQuery is necessary:

$('div.post:nth-child(even)').each(function() {
    $(".post_image", this).before($("post_preview", this));
});

Answer №2

It may not be flawless, but it'll get the job done

   $(".article:odd").each(function(i,e){
  
 $(this).children(".article_img").css("float","right");

  });

Answer №3

Here is a solution:

$('.post').each(function(i) {
    if (i % 2 === 0) {
        var image = $(this).find('.post_image');
        $(this).find('.post_image').remove();
        $(this).find('.post_preview').before(image);
    }
});

For every post, the code checks if it is an even index, then saves a copy of its image, removes the image, and places the copy before the preview section.

UPDATE: Please incorporate the following code (after providing your input):

$('.post').each(function(i) {
    if (i % 2 === 0) {
        $(this).find('.post_preview').css('float', 'right');
        $(this).find('.post_image').css('float', 'right');
    }
});

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 background image is failing to display

I am currently working on a subpage for my website that includes a navigation bar and footer. I am looking to add a background image behind the navigation bar, similar to this design. https://i.stack.imgur.com/j6fDZ.jpg After trying various methods, I at ...

htmlcsstwitter-bootstrap-3

Ways to showcase a list in 3 columns on larger screens and 1 column on smaller screens

When viewing on a computer, my list appears like this: https://i.sstatic.net/fNhaP.png However, when I switch to a phone, only the first column is visible and the list does not continue in a single column format. I am utilizing Bootstrap for my layout, a ...

javascriptcsssizescreen

The Power of the CSS Universal Selector and Specificity

Currently exploring the puzzling scenario where .x seems to have higher specificity than *.x, despite expectations. Shouldn't *.x technically have a specificity of 0-0-1-1 (1 class, 1 tag) while .x is just one class with specificity 0-0-1-0? Let&apo ...

csscss-specificity

Creating a webpage using jQuery and ajax

I am in the process of developing a game using only jQuery and AJAX for navigation and content loading without ever refreshing the page. One issue I am encountering is the need to create functions for every action. For instance: <p onclick="a_function ...

jqueryajax

Access JSON value using jQuery by key

Creating a JSON structure that contains information about attendees: { "attendees": [ { "datum": "Tue, 11 Apr 2017 00:00:00 GMT", "name": " Muylaert-Geleir", "prename": "Alexander" }, { "datum": "Wed, 12 Apr 2017 ...

javascriptjqueryjson

How can I make the droppable elements only drop within draggable elements in jQuery UI?

After reading several similar articles and questions, I am still struggling to get this working properly when there are multiple droppable elements with the same named class. Is there a way to ensure that the dragged element can only be dropped in a speci ...

javascriptjqueryjquery-ui

determine the selection based on its numerical index

I'm looking to leverage the robot framework for automating user actions involving hovering over a bar chart. Is there a method to identify the bar chart by its index? Or what would be the appropriate selector for using the robot framework to hover o ...

cssxpathrobotframework

The "html" element fails to achieve a full height when applying a 100% height setting

I am facing a height problem of 100% <!doctype html> <html> <head> <meta charset="utf-8"> <title>My Dreamweaver Website</title> <link rel="stylesheet" href="style.css"> </head> <body> <section clas ...

htmlcssdreamweaver

Manipulating the InnerHTML content of a total of 144 individual cells

I am currently developing a tile-based game using tables. Each td cell contains the following code: <td> <div id="image" style="display:none; display: fixed; right: 5; top:2;"><img src="http://thumb7.shutterstock.com/display_pic_with_logo ...

javascripthtmlhtml-table

What does the HTML and JS code look like when using Next.Js?

Here's an illustration of the desired result: codepen.io/j0be/pen/jWGVvV How can I implement this HTML and JS in Next.js? I am looking to customize this code using TypeScript and SCSS in Next.js. However, I am unsure about how to convert the HTML an ...

javascripthtmlreactjssassnext.js

Alter certain terms in HTML and update background using JavaScript

I want to create a filter that replaces inappropriate words and changes the background color using JavaScript. Here is what I have so far: $(document).ready(function () { $('body').html(function(i, v) { return v.replace(/bad/g, &apos ...

javascriptjquerycsshtml

What is the best way to conceal a Material UI button with CSS?

For my TODO react app, I am using a Material UI button. My goal is to create a form with an input field and a submit button, but I want the submit button to be invisible so that users think the form submits when they press the "Return" key. import { Tex ...

cssreactjsformsbuttonmaterial-ui

Looking to adjust the width of a Bootstrap dropdown menu?

I am trying to adjust the width of my dropdown menu Here is a link to jsfiddle with my code: [jsfiddler][1]. On the right side of the main menu, I have a languages dropdown menu. When it expands, its width is very large and I want it to match the main m ...

jqueryhtmlcsstwitter-bootstrapdrop-down-menu

What could be the reason for my jQuery function functioning in IE8 but not in FF3.6.11?

I have a group of checkboxes with an option for 'None'. When 'None' is clicked, it should uncheck the rest of the checkboxes in the set. If any other checkbox is clicked, 'None' should be unchecked. This functionality is worki ...

jquerycross-browser

How to position collapsible buttons in Twitter's Bootstrap framework

I have successfully created two buttons on the same line. The second button is collapsible and when clicked, it adds a row of two more buttons to the view. However, the newly collapsed row of buttons appears aligned with the second button. I would like th ...

jqueryhtmlcsstwitter-bootstrap

Chart showing a Google Timeline: Allow for each bar to be colored differently when there are multiple bars on the same line

It appears that the Google Timeline charts have a feature to color individual blocks on the timeline as indicated in the documentation at However, there seems to be an issue when two bars overlap on the same line, which is evident in this fiddle: http://j ...

javascriptjquerycss

Struggling to access the "this.array" variable within a TypeScript-powered Angular 4 application

I cannot access the this.array variable in my TypeScript-Angular 4 application. The error is being thrown at this.services.push because this.services is undefined. My code looks like this: export class ServersComponent implements OnInit { //Initializi ...

javascriptjqueryangulartypescript

Using PHP and MySQL to handle data submission through the POST method

When I send data to post[submit] and post[request], it's coming from two separate buttons. Even though I successfully submitted user_id to post[submit], I'm encountering difficulty in echoing the user_id in the request portion (post[request]). ...

javascriptphphtmlmysqlcss

Bootstrap's square-shaped columns

I would like to implement a grid of squares for navigation purposes. By squares, I mean that the colored areas should have equal width and height. Currently, I have achieved this using JavaScript, but I am interested in a CSS-only solution. My project is ...

javascriptjqueryhtmlcsstwitter-bootstrap

The z-index of the React Apex Chart toolbar menu icon is too high. Is there a way to decrease it?

Is there a way to adjust the z-index value of the icons within React Apexchart's toolbar menu? Even when I position my element at a higher level, they remain on top of it. ...

cssreactjsapexcharts