Choose a Range of DOM Elements

Question

Choose a Range of DOM Elements

My challenge is to select a range of DOM elements, starting from element until element. This can be done in jQuery like this: (Source)

$('#id').nextUntil('#id2').andSelf().add('#id2')

I want to achieve the same using JavaScript only.

Here's my attempt so far, but it seems to result in an infinite loop:

function prevRange(element, prevTill) {
    var result = [];

    while (element !== prevTill)
        result.push(element);
    return result;
}

JSFiddle

var wrapper = document.getElementById('wrapper'),
  wrapperChildren = wrapper.children;

console.log(prevRange(wrapperChildren[2], wrapperChildren[0]));

function prevRange(element, prevTill) {
  var result = [];

  /*while (element !== prevTill)
      result.push(element);*/
  return result;
}

<ul id="wrapper">
  <li class="inner">I'm #01</li>
  <li class="inner">I'm #02</li>
  <li class="inner">I'm #03</li>
  <li class="inner">I'm #04</li>
</ul>

javascript html css

Answer 1

Answer №1

When looking for the previous element sibling, you can utilize Element.previousElementSibling:

var container = document.getElementById('container'),
  containerChildren = container.children;

console.log(findPreviousElements(containerChildren[2], containerChildren[0]));

function findPreviousElements(element, stopAt) {
  var result = [element];

  while (element && element !== stopAt) {
    element = element.previousElementSibling;
    result.push(element);
  }

  return result;
}

<ul id="container">
  <li class="item">Item #01</li>
  <li class="item">Item #02</li>
  <li class="item">Item #03</li>
  <li class="item">Item #04</li>
</ul>

Answer 2

When looking for the previous element sibling, you can utilize Element.previousElementSibling:

var container = document.getElementById('container'),
  containerChildren = container.children;

console.log(findPreviousElements(containerChildren[2], containerChildren[0]));

function findPreviousElements(element, stopAt) {
  var result = [element];

  while (element && element !== stopAt) {
    element = element.previousElementSibling;
    result.push(element);
  }

  return result;
}

<ul id="container">
  <li class="item">Item #01</li>
  <li class="item">Item #02</li>
  <li class="item">Item #03</li>
  <li class="item">Item #04</li>
</ul>

Answer 3

Answer №2

The variables element and prevTill remain constant within the while loop, causing it to potentially never execute if they are not initially equal. Additionally, the array of elements to iterate over is missing from the function.

To address this, consider updating the function to include the array of elements to iterate over, along with the start and end indices for the desired subset. This will allow for proper iteration over the array within the while loop.

var wrapper = document.getElementById('wrapper'),
  wrapperChildren = wrapper.children;

console.log(prevRange(wrapperChildren, 0, 2));

function prevRange(array, start, end) {
  var result = [];

  var curr = start;

  while (curr <= end) {
    result.push(array[curr]);
    curr++;
  }

  return result;
}

<ul id="wrapper">
  <li class="inner">I'm #01</li>
  <li class="inner">I'm #02</li>
  <li class="inner">I'm #03</li>
  <li class="inner">I'm #04</li>
</ul>

Answer 4

The variables element and prevTill remain constant within the while loop, causing it to potentially never execute if they are not initially equal. Additionally, the array of elements to iterate over is missing from the function.

To address this, consider updating the function to include the array of elements to iterate over, along with the start and end indices for the desired subset. This will allow for proper iteration over the array within the while loop.

var wrapper = document.getElementById('wrapper'),
  wrapperChildren = wrapper.children;

console.log(prevRange(wrapperChildren, 0, 2));

function prevRange(array, start, end) {
  var result = [];

  var curr = start;

  while (curr <= end) {
    result.push(array[curr]);
    curr++;
  }

  return result;
}

<ul id="wrapper">
  <li class="inner">I'm #01</li>
  <li class="inner">I'm #02</li>
  <li class="inner">I'm #03</li>
  <li class="inner">I'm #04</li>
</ul>

Answer 5

Answer №3

The key issue is the lack of iteration over the elements. By not changing the 'element' variable, it will never be equal to 'prevTill'. One way to solve this is by passing an array of element's children and iterating through it with a 'for' loop to define the desired range. This approach involves passing the array of elements along with the minimum and maximum indices for the child elements you wish to target.

Answer 6

The key issue is the lack of iteration over the elements. By not changing the 'element' variable, it will never be equal to 'prevTill'. One way to solve this is by passing an array of element's children and iterating through it with a 'for' loop to define the desired range. This approach involves passing the array of elements along with the minimum and maximum indices for the child elements you wish to target.

Answer 7

Answer №4

Were you interested in implementing the following logic?

while (target !== null && target !== prevTarget)
{
    output.push(target);
    target = target.previousElementSibling;
}

Check out the latest demo.

Answer 8

Were you interested in implementing the following logic?

while (target !== null && target !== prevTarget)
{
    output.push(target);
    target = target.previousElementSibling;
}

Check out the latest demo.

Answer 9

Answer №5

There have been multiple responses provided, but I have come up with a comprehensive solution that caters to your specific needs.

function extractItemsInRange(startIndex, endIndex) {
   var index;
   var output = [];
   if (startIndex > endIndex) {
    // iterating backwards
    index = startIndex;

    while (index >= endIndex) { 
        output.push(dataArray[index]);
        index--;
    }
   }
   else if (startIndex < endIndex) {
    // iterating forwards
    index = startIndex;

    while (index <= endIndex) {
        output.push(dataArray[index]);
        index++;
    }
   }
   else {
    // return just one item
    output.push(dataArray[startIndex]);
   }

   return output;
}

Answer 10

There have been multiple responses provided, but I have come up with a comprehensive solution that caters to your specific needs.

function extractItemsInRange(startIndex, endIndex) {
   var index;
   var output = [];
   if (startIndex > endIndex) {
    // iterating backwards
    index = startIndex;

    while (index >= endIndex) { 
        output.push(dataArray[index]);
        index--;
    }
   }
   else if (startIndex < endIndex) {
    // iterating forwards
    index = startIndex;

    while (index <= endIndex) {
        output.push(dataArray[index]);
        index++;
    }
   }
   else {
    // return just one item
    output.push(dataArray[startIndex]);
   }

   return output;
}

Answer 11

Answer №6

To ensure you don't end up in an endless loop, it's important to iterate through elements. A functional example of the code could be structured like this:

function previousRange(element, previousElement) {
    var result = [];
    if (element === previousElement) {
        result.push(element);
        return result;
    }
    var siblings = element.parentNode.children; // The previous element is expected among the siblings
    var startSelection = false;
    for (var i = 0, child; child = siblings[i]; ++i) { // Iterating through siblings
        if (child === element || child === previousElement) { // Doesn't matter which comes first
            result.push(child);
            startSelection = !startSelection; // Start or stop selection
        } else if (startSelection) {
            result.push(child);
        }
    }

    /*while (element !== previousElement) this is your code
        result.push(element);*/
    return result;
}

Answer 12

To ensure you don't end up in an endless loop, it's important to iterate through elements. A functional example of the code could be structured like this:

function previousRange(element, previousElement) {
    var result = [];
    if (element === previousElement) {
        result.push(element);
        return result;
    }
    var siblings = element.parentNode.children; // The previous element is expected among the siblings
    var startSelection = false;
    for (var i = 0, child; child = siblings[i]; ++i) { // Iterating through siblings
        if (child === element || child === previousElement) { // Doesn't matter which comes first
            result.push(child);
            startSelection = !startSelection; // Start or stop selection
        } else if (startSelection) {
            result.push(child);
        }
    }

    /*while (element !== previousElement) this is your code
        result.push(element);*/
    return result;
}

Answer 13

Answer №7

There are multiple techniques to achieve this task. Personally, I find Nikhil's approach for moving backward quite effective, and a similar method can be implemented for moving forward using the nextSibling property.

In my experience, there have been challenges with utilizing next and previous methods, especially on browsers like IE and Edge - Thanks Microsoft!

Here is another straightforward alternative that does not depend on DOM next/prev:

var wrapper = document.getElementById('wrapper'),
    wrapperChildren = wrapper.children;

console.log(stopWhen(wrapperChildren[0],wrapperChildren[2]));

function stopWhen(start,end){
    var results = new Array()
        ,parent = start.parentElement
      ,startPos = Array.prototype.indexOf.call(parent.childNodes, start)-2
      ,endPos = Array.prototype.indexOf.call(parent.childNodes, end)-2;
      for(var i=startPos; i < endPos; i++){    
        if(parent.children[i] != null){
            results.push(parent.children[i]);
        }
      }
      return results;
}

Check out the modified version here: fiddle

Answer 14

There are multiple techniques to achieve this task. Personally, I find Nikhil's approach for moving backward quite effective, and a similar method can be implemented for moving forward using the nextSibling property.

In my experience, there have been challenges with utilizing next and previous methods, especially on browsers like IE and Edge - Thanks Microsoft!

Here is another straightforward alternative that does not depend on DOM next/prev:

var wrapper = document.getElementById('wrapper'),
    wrapperChildren = wrapper.children;

console.log(stopWhen(wrapperChildren[0],wrapperChildren[2]));

function stopWhen(start,end){
    var results = new Array()
        ,parent = start.parentElement
      ,startPos = Array.prototype.indexOf.call(parent.childNodes, start)-2
      ,endPos = Array.prototype.indexOf.call(parent.childNodes, end)-2;
      for(var i=startPos; i < endPos; i++){    
        if(parent.children[i] != null){
            results.push(parent.children[i]);
        }
      }
      return results;
}

Check out the modified version here: fiddle

Answer 15

Answer №8

Utilizing the Array prototype methods slice and indexOf.

getRangeElements(
  document.getElementById('wrapper'), // parent
  document.getElementById('li1'),     // start
  document.getElementById('li3')      // end
)

function getRangeElements (parent, start, end) {
  var children = parent.children
  return [].slice.call(
    children, 
    [].indexOf.call(children, start),
    [].indexOf.call(children, end) + 1
  )
}

Since ChildNodes do not naturally have array methods, we are using the call method to apply that functionality. By allowing childNodes to be treated like array elements, we can then determine the indexOf the child elements and slice the desired range.

Example HTML:

<ul id="wrapper">
  <li class="inner" id="li1">I'm #01</li>
  <li class="inner" id="li2">I'm #02</li>
  <li class="inner" id="li3">I'm #03</li>
  <li class="inner" id="li4">I'm #04</li>
</ul>

Resulting in:

[li#li1.inner, li#li2.inner, li#li3.inner]

JSFiddle example

Answer 16

Utilizing the Array prototype methods slice and indexOf.

getRangeElements(
  document.getElementById('wrapper'), // parent
  document.getElementById('li1'),     // start
  document.getElementById('li3')      // end
)

function getRangeElements (parent, start, end) {
  var children = parent.children
  return [].slice.call(
    children, 
    [].indexOf.call(children, start),
    [].indexOf.call(children, end) + 1
  )
}

Since ChildNodes do not naturally have array methods, we are using the call method to apply that functionality. By allowing childNodes to be treated like array elements, we can then determine the indexOf the child elements and slice the desired range.

Example HTML:

<ul id="wrapper">
  <li class="inner" id="li1">I'm #01</li>
  <li class="inner" id="li2">I'm #02</li>
  <li class="inner" id="li3">I'm #03</li>
  <li class="inner" id="li4">I'm #04</li>
</ul>

Resulting in:

[li#li1.inner, li#li2.inner, li#li3.inner]

JSFiddle example

Answer 17

Answer №9

If you want to automate the process, consider using a TreeWalker:

var wrapper = document.getElementById('wrapper');
var wrapperChildren = wrapper.children;

function findElementRange(rangeRoot, elementStart, elementEnd) {
  var result = [];
  var itr = document.createTreeWalker(
    rangeRoot,
    NodeFilter.SHOW_ELEMENT,
    null, // no filter
    false);
  itr.currentNode = elementStart;

  do {
    result.push(itr.currentNode);
  } while(itr.currentNode !== elementEnd && itr.nextSibling());

  return result;
}

console.log(findElementRange(wrapper, wrapperChildren[0], wrapperChildren[2]));

<ul id="wrapper">
  <li class="inner">I'm #01</li>
  <li class="inner">I'm #02</li>
  <li class="inner">I'm #03</li>
  <li class="inner">I'm #04</li>
</ul>

For more information on how TreeWalkers work, check out this link to MDN.

It's also beneficial to be familiar with the TreeWalker interface object.

I hope this explanation was useful.

*Edit - Here is an example that handles bidirectional ranges:

var wrapper = document.getElementById('wrapper');
var wrapperChildren = wrapper.children;

function findElementRange(elementStart, elementEnd) {
  var result = [];
  var rootNode;
  var indexStart;
  var indexEnd;
  
  rootNode = elementStart.parentNode;
  if(rootNode !== elementEnd.parentNode){
      return console.log("Cannot find Element Range, elements are not siblings");
  }
  
  //Determine traversal direction
  indexStart = Array.prototype.indexOf.call(rootNode.childNodes, elementStart);
  indexEnd = Array.prototype.indexOf.call(rootNode.childNodes, elementEnd);

  var itr = document.createTreeWalker(
    rootNode,
    NodeFilter.SHOW_ELEMENT,
    null, // no filter
    false);
  itr.currentNode = elementStart;
  var iterateMethod = indexStart < indexEnd ? 'nextSibling' : 'previousSibling';
  do {
    result.push(itr.currentNode);
  } while(itr.currentNode !== elementEnd && itr[iterateMethod]());
  
  return result;
}

console.log(findElementRange(wrapperChildren[1], wrapperChildren[3]));
console.log(findElementRange(wrapperChildren[3], wrapperChildren[1]));

<ul id="wrapper">
  <li class="inner">I'm #01</li>
  <li class="inner"I'm #02</li>
  <li class="inner">"I'm #03</li>
  <li class="inner">I'm #04</li>
</ul>

Answer 18

If you want to automate the process, consider using a TreeWalker:

var wrapper = document.getElementById('wrapper');
var wrapperChildren = wrapper.children;

function findElementRange(rangeRoot, elementStart, elementEnd) {
  var result = [];
  var itr = document.createTreeWalker(
    rangeRoot,
    NodeFilter.SHOW_ELEMENT,
    null, // no filter
    false);
  itr.currentNode = elementStart;

  do {
    result.push(itr.currentNode);
  } while(itr.currentNode !== elementEnd && itr.nextSibling());

  return result;
}

console.log(findElementRange(wrapper, wrapperChildren[0], wrapperChildren[2]));

<ul id="wrapper">
  <li class="inner">I'm #01</li>
  <li class="inner">I'm #02</li>
  <li class="inner">I'm #03</li>
  <li class="inner">I'm #04</li>
</ul>

For more information on how TreeWalkers work, check out this link to MDN.

It's also beneficial to be familiar with the TreeWalker interface object.

I hope this explanation was useful.

*Edit - Here is an example that handles bidirectional ranges:

var wrapper = document.getElementById('wrapper');
var wrapperChildren = wrapper.children;

function findElementRange(elementStart, elementEnd) {
  var result = [];
  var rootNode;
  var indexStart;
  var indexEnd;
  
  rootNode = elementStart.parentNode;
  if(rootNode !== elementEnd.parentNode){
      return console.log("Cannot find Element Range, elements are not siblings");
  }
  
  //Determine traversal direction
  indexStart = Array.prototype.indexOf.call(rootNode.childNodes, elementStart);
  indexEnd = Array.prototype.indexOf.call(rootNode.childNodes, elementEnd);

  var itr = document.createTreeWalker(
    rootNode,
    NodeFilter.SHOW_ELEMENT,
    null, // no filter
    false);
  itr.currentNode = elementStart;
  var iterateMethod = indexStart < indexEnd ? 'nextSibling' : 'previousSibling';
  do {
    result.push(itr.currentNode);
  } while(itr.currentNode !== elementEnd && itr[iterateMethod]());
  
  return result;
}

console.log(findElementRange(wrapperChildren[1], wrapperChildren[3]));
console.log(findElementRange(wrapperChildren[3], wrapperChildren[1]));

<ul id="wrapper">
  <li class="inner">I'm #01</li>
  <li class="inner"I'm #02</li>
  <li class="inner">"I'm #03</li>
  <li class="inner">I'm #04</li>
</ul>

Choose a Range of DOM Elements

JSFiddle

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Answer №9

Similar questions

Error: The specified object does not contain the 'tableRow' method

Using indented, multi-line logging in a NodeJS environment can help to

What is the best way to create a button that will trigger a modal window to display a message?

Specifying file types in an HTML upload form

Executing a query with a `has many` relationship in MongoDB: Step-by-step guide

How can a JQuery slideshow be programmed to only iterate once?

hiding elements yet passing down

Troubleshooting the error "The 'listener' argument must be a function" in Node.js HTTP applications

Extract a value from a json document

Hide modal once form has been successfully submitted

Looking for a solution to align the header properly in your React app?

The Shopify Pixel Extension has encountered an issue - error code 1

What is the best approach to concurrently update a single array from multiple functions?

The issue of an undefined Node.js variable post "await"

Shut down the active tab

Tips on customizing the color of checkboxes in a ReactJS material table

Express.js - display the complete information

"Positioned at the top of the page is the alert box, with the

Creating a recursive function using NodeJS

Navigating through the content of slots within recurring slots in a subcomponent in Vue.js