2

我有以下工作正常，但我需要对其进行调整，以便将数据文件夹级别与小于或大于进行比较。

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

我试过这个...

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

但这不起作用。

有任何想法吗？

编辑：

示例 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>

因此，单击列表中的第 3 个将删除接下来的 4 个列表项。

4

2 回答 2

2

根据文档，nextUntil期望选择器或元素作为第一个参数。

然而，从 jQuery 1.7 开始，函数似乎也可以工作了。所以你可以使用

$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>

于 2015-10-12T14:55:52.430 回答
1

没有任何<=数据属性选择器，但您可以使用 jQuerynextUntil和filter方法来检查后续元素的数据属性并采取相应措施。

代码：

$("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();
});

演示：http: //jsfiddle.net/x0Lwvhc3/

编辑

由于您想限制删除可以使用的深度更改each，如果发现更改，请使用return false.

代码：

$("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();
        }
    })
});

演示：http: //jsfiddle.net/91jL1j6t/

于 2015-10-12T14:40:26.400 回答