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 に答える