Arranging HTML elements with jQuery - the existing script flips back and forth

Question

Arranging HTML elements with jQuery - the existing script flips back and forth

I have created a code snippet on CodePen that showcases a feature of the website I am currently developing: http://codepen.io/barrychapman/pen/BzJGbg?editors=1010

Upon loading the page, you will notice 6 boxes. The first box is active, while the remaining 5 are disabled. By clicking the Add to Metric 2 button, you can enable the second box.

After enabling, click the Resort button to observe what happens. The field headers remain unlabeled to show you the behavior firsthand. The fields will now be rearranged as follows: [1,2,6,5,4,3].

Repeating the click on Resort will correctly sort the fields as [1,2,3,4,5,6]. Another click reverses the order back to the initial state. Here is the specific code segment responsible for this functionality:

$('#target_metrics > div.disabled').each(
  function() {
    var $this = $(this);
    $('#target_metrics').find('div.metric-template:not(.disabled)').last().after($this);
  }
);

I am facing a challenge here. My goal is to maintain the field order consistent after any modifications such as adding/enabling/disabling/removing a field. This consistency is crucial due to various data elements associated with these nodes.

Update

To demonstrate an undesired behavior, follow these steps:

Click Resort
Click Add to Metric 2
Click Resort

Observe that Metric 2 appears at the end of the row.
Click Resort

Now, Metric 2 is in the correct position.
Click Resort once more.

The other fields have now been resorted.

javascript jquery html css dom

Answer 1

Answer №1

It appears that you are indicating a preference for having it as an array of `[1,2,3,4,5,6]`, which implies that the state of being disabled is not a concern. In any case, you can simplify this process by utilizing `Array.prototype.sort` on the elements.

It is advisable to minimize consecutive DOM modifications whenever feasible (such as during iteration over an array-like object) - retrieve the data, perform the necessary operations, and then reinsert it.

If your intention is to group them based on their disabled status while still sorting them, you could initially sort all the elements, subsequently segregate them into two distinct arrays based on their disablement, and display these on the page.

Make sure to refer to the MDN's Array.sort() documentation if you haven't done so already.

JS (non-grouped)

// true === Descending order
var direction = false;

function reorderNodes( dir ) {
  var $target = $('#target_metrics');
  var $metricDivs = Array.prototype.sort.call($target.children('div').detach(), function ( a, b ) {
    var _a = a.querySelector('.idx');
    var _b = b.querySelector('.idx');
    if ( _a && _b ) {
      if ( _a.innerHTML > _b.innerHTML ) {
        return dir ? 1 : -1;
      }
      if ( _a.innerHTML < _b.innerHTML ) {
        return dir ? -1 : 1;
      }
    }
    return 0;
  });
  $target.append($metricDivs);
}

Invoke this function on each button click (if you wish to allow toggling between ascending and descending order upon each click - otherwise maintain the same direction)

reorderNodes(direction);
direction = !direction;

http://codepen.io/dhenson02/pen/WxdLwA

For the grouped version, refer to this modified version:

http://codepen.io/dhenson02/pen/ZOvVpJ

Answer 2

It appears that you are indicating a preference for having it as an array of `[1,2,3,4,5,6]`, which implies that the state of being disabled is not a concern. In any case, you can simplify this process by utilizing `Array.prototype.sort` on the elements.

It is advisable to minimize consecutive DOM modifications whenever feasible (such as during iteration over an array-like object) - retrieve the data, perform the necessary operations, and then reinsert it.

If your intention is to group them based on their disabled status while still sorting them, you could initially sort all the elements, subsequently segregate them into two distinct arrays based on their disablement, and display these on the page.

Make sure to refer to the MDN's Array.sort() documentation if you haven't done so already.

JS (non-grouped)

// true === Descending order
var direction = false;

function reorderNodes( dir ) {
  var $target = $('#target_metrics');
  var $metricDivs = Array.prototype.sort.call($target.children('div').detach(), function ( a, b ) {
    var _a = a.querySelector('.idx');
    var _b = b.querySelector('.idx');
    if ( _a && _b ) {
      if ( _a.innerHTML > _b.innerHTML ) {
        return dir ? 1 : -1;
      }
      if ( _a.innerHTML < _b.innerHTML ) {
        return dir ? -1 : 1;
      }
    }
    return 0;
  });
  $target.append($metricDivs);
}

Invoke this function on each button click (if you wish to allow toggling between ascending and descending order upon each click - otherwise maintain the same direction)

reorderNodes(direction);
direction = !direction;

http://codepen.io/dhenson02/pen/WxdLwA

For the grouped version, refer to this modified version:

http://codepen.io/dhenson02/pen/ZOvVpJ

Answer 3

Answer №2

When rearranging your DOM elements for display purposes, consider using the CSS order property on flex items instead of manually sorting them.

Answer 4

When rearranging your DOM elements for display purposes, consider using the CSS order property on flex items instead of manually sorting them.

Arranging HTML elements with jQuery - the existing script flips back and forth

Answer №1

JS (non-grouped)

Answer №2

Similar questions

Discovering Ajax-powered websites Here are some tips on identifying websites

using jQuery to show a block element

Having trouble converting a string to an array in JS? Splitting doesn't seem to be doing

What was the reasoning behind Mozilla's decision to implement a conditional catch clause?

Using Angular 5 to link date input to form field (reactive approach)

Discover the optimal approach for merging two jQuery functions effortlessly

Ways to store data in the localStorage directly from a server

Multi selection dropdown feature in Angular failing to populate the options

Vue - the <script setup> element is unable to execute scripts

Problem with overlapping numbers in the Vis network

What could be the issue with this JSON data?

The delay in loading HTML content using FOSJsRoutingBundle and Ajax for a specific route parameter (ID)

Trouble with CSS submenus: Are your lists not appearing as they should? Potential style override

What could be causing the CSS height percentage to malfunction?

Encountering an error: Reading an undefined property - NodeJS, Express, and Mongoose

jQuery Div Animation with Excluded Text

Javascript - Button animation malfunctioning after first click

The functionality of sending form data via Express.js router is restricted

"Sequelize will pause and wait for the loop to finish before executing the

Javascript's second element does not trigger a click event with similar behavior