Easiest way to sort DOM nodes?

Asked
Active3 hr before
Viewed126 times

7 Answers

90%

Though there's probably an easier way to do this using a JS Library, here's a working solution using vanilla js.,without analyzing too much if this brings anything new to the table, i usually use this:, I'm not sure if this will help you, but if you're using a server side technology (like PHP) on this page, then it should also have access to the cookies. in PHP, it's in the global $_COOKIE array. – nickf Nov 12 '08 at 1:05 ,What's the easiest way to re-arrange the DOM nodes to my preference? (This needs to happen automatically when the page loads, the list-order preference is gained from a cookie)

Though there's probably an easier way to do this using a JS Library, here's a working solution using vanilla js.

var list = document.getElementById('mylist');

var items = list.childNodes;
var itemsArr = [];
for (var i in items) {
   if (items[i].nodeType == 1) { // get rid of the whitespace text nodes
      itemsArr.push(items[i]);
   }
}

itemsArr.sort(function(a, b) {
   return a.innerHTML == b.innerHTML ?
      0 :
      (a.innerHTML > b.innerHTML ? 1 : -1);
});

for (i = 0; i < itemsArr.length; ++i) {
   list.appendChild(itemsArr[i]);
}
load more v
88%

If I have a list like this:,What's the easiest way to re-arrange the DOM nodes to my preference? (This needs to happen automatically when the page loads, the list-order preference is gained from a cookie),Here's an ES6 function to sort DOM nodes in place:,where item is an array of children of the same parent. we remove starting with the last and append starting with the first to avoid flickering in the top part which is probably on screen. i usually get my items array like this:

If I have a list like this:

<ul id="mylist">
   <li id="list-item1">text 1</li>
   <li id="list-item2">text 2</li>
   <li id="list-item3">text 3</li>
   <li id="list-item4">text 4</li>
</ul>

E.g.

<ul id="mylist">
   <li id="list-item3">text 3</li>
   <li id="list-item4">text 4</li>
   <li id="list-item2">text 2</li>
   <li id="list-item1">text 1</li>
</ul>
load more v
72%

I am trying to sort the following DOM nodes:,my current strategy is to store the text of the nodes in an array, then call sort() on that array, and then append nodes with values from the sorted array to the DOM. Here is my attempt: https://jsfiddle.net/w7v8qv3c/ I get this error: Argument 1 of Node.appendChild is not an object so I must be approaching this problem incorrectly. What is the best way to sort DOM nodes without using a library?,If you want to make this work the way you're trying, you will have to convert the strings back into paragraphs before inserting them, like so:,The idea is to use sort function with the textContent, then sort from the first to the laste item.

I am trying to sort the following DOM nodes:

      <p>foo</p>
      <p>baz</p>
      <p>bar</p>
load more v
65%

Let’s dive into what the sortByBrand() function will need to contain. Because $products contains an array of DOM elements, we’ll need to use an array sort to get them into a new order. Javascript provides exactly this with its .sort() method, which browsers usually interpret with some flavor of insertion sorting (check out the Chrome source code for .sort()).,Cool, so now that object contains an array of of all of the complex DOM elements that represent our unsorted record list. The next step is to setup the sorts.,I then add a single line of JS to my sort method to get those sorted elements into the DOM:,How can you instruct the sort to compare not the entire object as a string but rather parameters within the object? For that, we need more jQuery selectors!

The DOM elements to be sorted are a series of nested partials that contain pertinent information about products wrapped in classes. For now, I’ve simplified the code a bit to show you what it looks in the view templates. The show page renders a collection of products and each product in turn renders a rating partial. The result is a multi-line HTML chunk that I then need to grab, sort, and re-render all through the browser.

views/products/show.html.erb<div class="sortable">  <%= render partial: 'products/product', collection: @products, as: :product %></div>views/products/_product.html.erb<div class=”product”> <div class=”image”> <%= link_to image_tag(product.image.url), product %> </div> <div class=”brand”><%= product.brand %></div> <div class=”name”><%= link_to product.name, product %></div><div class=”rating-info”> <%= render partial: ‘products/rating’, locals: {rating: product.rating} %> </div> </div>/views/products/_rating.html.erb<div class=”rating”> <%= rating.round(1) %></div>
load more v
75%

What's the easiest way to re-arrange the DOM nodes to my preference? (This needs to happen automatically when the page loads, the list-order preference is gained from a cookie),where item is an array of children of the same parent. we remove starting with the last and append starting with the first to avoid flickering in the top part which is probably on screen. i usually get my items array like this:,You might find that sorting the DOM nodes doesn't perform well. A different approach would be to have in your javascript an array that represents the data that would go into the DOM nodes, sort that data, and then regenerate the div that holds the DOM nodes.,Maybe you dont' have that many nodes to sort, so it wouldn't matter. My experience is based on trying to sort HTML tables by manipulating the DOM, including tables with hundreds of rows and a couple dozen columns.

If I have a list like this:

<ul id="mylist">
   <li id="list-item1">text 1</li>
   <li id="list-item2">text 2</li>
   <li id="list-item3">text 3</li>
   <li id="list-item4">text 4</li>
</ul>

E.g.

<ul id="mylist">
   <li id="list-item3">text 3</li>
   <li id="list-item4">text 4</li>
   <li id="list-item2">text 2</li>
   <li id="list-item1">text 1</li>
</ul>
load more v
40%

What’s the easiest way to re-arrange the DOM nodes to my preference? (This needs to happen automatically when the page loads, the list-order preference is gained from a cookie),Though there’s probably an easier way to do this using a JS Library, here’s a working solution using vanilla js., How to convert an array of integers to a single digit , Array concating based on sequence of object Ids in between specific objects

<ul id="mylist">
   <li id="list-item1">text 1</li>
   <li id="list-item2">text 2</li>
   <li id="list-item3">text 3</li>
   <li id="list-item4">text 4</li>
</ul>
load more v
22%

What's the easiest way to re-arrange the DOM nodes to my preference? (This needs to happen automatically when the page loads, the list-order preference is gained from a cookie),Zip up the site-packages dir of the virtualenv. This will include your library and it's dependencies, which the worker nodes will need, but not the standard Python library, which they already have,The solution I have come up with is not designed for large-scale dependencies like NumPy specifically (although it may work for them). Also, it won't work if you are building C-based extensions, and your driver node has a different architecture to your cluster nodes. ,Of course you would want to code up some helper scripts to manage this process. Here is a helper script adapted from one I have been using, which could doubtless be improved a lot:

If I have a list like this:

<ul id="mylist">
   <li id="list-item1">text 1</li>
   <li id="list-item2">text 2</li>
   <li id="list-item3">text 3</li>
   <li id="list-item4">text 4</li>
</ul>

E.g.

<ul id="mylist">
   <li id="list-item3">text 3</li>
   <li id="list-item4">text 4</li>
   <li id="list-item2">text 2</li>
   <li id="list-item1">text 1</li>
</ul>
load more v

Other "undefined-undefined" queries related to "Easiest way to sort DOM nodes?"