jQuery nextUntil attribute is less then or equal to value

Question

I have the following which works OK, but I need adapt it so that it compares the data-folder-level against being less than or greater to.

$elem.nextUntil( $("li[data-folder-level="+level+"]"), "li" ).remove();

I tried this...

$elem.nextUntil( $("li[data-folder-level<="+level+"]"), "li" ).remove();

But that doesn't work.

Any ideas?

EDIT:

Example html

<li data-folder-level="0"><a href="#">Hello world</a></li>
<li data-folder-level="1"><a href="#">Hello world</a></li>
<li data-folder-level="1"><a href="#">CLICK ME!!!!!!!!!!!!!!!</a></li>
<li data-folder-level="2"><a href="#">Will be removed...</a></li>
<li data-folder-level="2"><a href="#">Will be removed...</a></li>
<li data-folder-level="2"><a href="#">Will be removed...</a></li>
<li data-folder-level="3"><a href="#">Will be removed...</a></li>
<li data-folder-level="0"><a href="#">Hello world</a></li>
<li data-folder-level="0"><a href="#">Hello world</a></li>
<li data-folder-level="1"><a href="#">Hello world</a></li>
<li data-folder-level="0"><a href="#">Hello world</a></li>
<li data-folder-level="0"><a href="#">Hello world</a></li>
<li data-folder-level="1"><a href="#">Hello world</a></li>
<li data-folder-level="1"><a href="#">Hello world</a></li>
<li data-folder-level="1"><a href="#">Hello world</a></li>
<li data-folder-level="2"><a href="#">Hello world</a></li>
<li data-folder-level="2"><a href="#">Hello world</a></li>
<li data-folder-level="2"><a href="#">Hello world</a></li>

So clicking on the 3rd in the list would remove the next 4 list items.

jQuery doesn't have an `<=` attribute selector. Can you post up your HTML so we can see how to solve this. — Rory McCrossan, Oct 12 '15 at 14:28
@Tushar... I took your advice, but can't really credit you unless you post it as an answer! — Tom, Oct 12 '15 at 14:37
How the elements should be removed? this-level + 1 or `level <= thislevel+1` — Tushar, Oct 12 '15 at 14:37
In the example shown, the subsequent 4 elements (with a folder-level greater than 1) should be removed - stopping when it reaches an element with a folder-level less than or equal to 1. — Tom, Oct 12 '15 at 15:00

Oriol · Answer 1 · 2015-10-12T15:07:22.353

According to the docs, nextUntil expects either a selector or an element as the first argument.

However, since jQuery 1.7, functions seem to work too. So you can use

$elem.nextUntil(function () {
  return $(this).attr("data-folder-level") <= level;
}, "li").remove();

$("ol").on("click", "li", function () {
  var level = +$(this).attr("data-folder-level");
  $(this).nextUntil(function () {
    return $(this).attr("data-folder-level") <= level;
  }, "li").remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol>
  <li data-folder-level="0"><a href="#">Hello world</a></li>
  <li data-folder-level="1"><a href="#">Hello world</a></li>
  <li data-folder-level="1"><a href="#">CLICK ME!!!!!!!!!!!!!!!</a></li>
  <li data-folder-level="2"><a href="#">Will be removed...</a></li>
  <li data-folder-level="2"><a href="#">Will be removed...</a></li>
  <li data-folder-level="2"><a href="#">Will be removed...</a></li>
  <li data-folder-level="3"><a href="#">Will be removed...</a></li>
  <li data-folder-level="0"><a href="#">Hello world</a></li>
  <li data-folder-level="0"><a href="#">Hello world</a></li>
  <li data-folder-level="1"><a href="#">Hello world</a></li>
  <li data-folder-level="0"><a href="#">Hello world</a></li>
  <li data-folder-level="0"><a href="#">Hello world</a></li>
  <li data-folder-level="1"><a href="#">Hello world</a></li>
  <li data-folder-level="1"><a href="#">Hello world</a></li>
  <li data-folder-level="1"><a href="#">Hello world</a></li>
  <li data-folder-level="2"><a href="#">Hello world</a></li>
  <li data-folder-level="2"><a href="#">Hello world</a></li>
  <li data-folder-level="2"><a href="#">Hello world</a></li>
</ol>

How come this isn't documented? – Edward Jun 02 '17 at 07:02 — Edward, Jun 02 '17 at 07:02

Irvin Dominin · Answer 2 · 2015-10-12T15:19:36.667

1

There isn't any <= data-attribute selector, but you can use jQuery nextUntil and filter methods in order to check your sequent elements data-attribute and act accordingly.

Code:

$("li").click(function () {
    var $elem = $(this);
    var level = $(this).attr("data-folder-level");
    $elem.nextUntil().filter(function () {
        return $(this).attr("data-folder-level") > level;
    }).remove();
});

Demo: http://jsfiddle.net/x0Lwvhc3/

EDIT

Since you want to limit the deletion on the depth change you can use each and if a change is found stop it using return false.

Code:

$("li").click(function () {
    var $elem = $(this);
    var level = $(this).attr("data-folder-level");
    $elem.nextUntil().each(function () {
        if ($(this).attr("data-folder-level") <= level) {
            return false;
        } else {
            $(this).remove();
        }
    })
});

Demo: http://jsfiddle.net/91jL1j6t/

edited Oct 12 '15 at 15:19

answered Oct 12 '15 at 14:40

Irvin Dominin

30,819
9
77
111

You can safely remove `var $elem = $(this);` as it is not required to cache context here – Tushar Oct 12 '15 at 14:43
2

Inside `filter` use only `return parseInt($(this).attr("data-folder-level")) <= level` – Tushar Oct 12 '15 at 14:44
This removes more than the 4 subsequent elements. – Oriol Oct 12 '15 at 15:03

jQuery nextUntil attribute is less then or equal to value

2 Answers2

EDIT