0

ネストされたULLIリストがあります。例えば

前

<ul>
    <li>Item A</li>
    <li>Item B
        <ul>
            <li id="removeme">Item BA (REMOVE ME)
            <ul>
                <li>Item BAA</li>
                <li>Item BAB</li>
                <li>Item BAC</li>
                <li>Item BAD
                    <ul>
                    <li>Item BADA</li>
                    <li>Item BADB</li>
                    <li>Item BADC</li>
                    <li>Item BADD</li>
                    </ul>                 
                </li>
                <li>Item</li>
            </ul>            
            </li>
            <li>Item BB</li>
            <li>Item BC </li>
            <li>Item BD</li>
        </ul>
    </li>
    <li>Item C</li>
    <li>Item D</li>
    <li>Item E</li>
</ul>

後 ：

<ul>
    <li>Item A</li>
    <li>Item B
        <ul>
            <li>Item BAA</li>
            <li>Item BAB</li>
            <li>Item BAC</li>
            <li>Item BAD
                <ul>
                <li>Item BADA</li>
                <li>Item BADB</li>
                <li>Item BADC</li>
                <li>Item BADD</li>
                </ul>                 
            </li>
            <li>Item</li>           
            </li>
            <li>Item BB</li>
            <li>Item BC </li>
            <li>Item BD</li>
        </ul>
    </li>
    <li>Item C</li>
    <li>Item D</li>
    <li>Item E</li>
</ul>

たとえば、上の括弧内の項目（または任意の項目）をダブルクリックしてリストから削除したい場合は、子要素を保持して親を変更します。どのようにこれを行いますか？私はナビゲーションマネージャーに取り組んでおり、アイテムを削除できる必要がありますが、子は削除できず、子の親を再設定する必要があります。

手がかりは素晴らしいでしょう。

ただし、現在の要素のすべての子を現在のアイテムの親に追加することについては説明しました。しかし、それはulを複製します。

ありがとう

*例の前後に含まれるように更新

4

3 に答える 3

1

このようなもの：

$("li").dblclick(function(e) {
    e.stopPropagation();
    var $children = $(this).children().detach();
    $(this).remove();
    // do something with $children here, e.g.,
    // $children.appendTo(someOtherElement)
});

この.detach()メソッドは、要素をDOMから削除しますが、それらに関連付けられているすべてのjQueryデータを保持するため、後で再挿入できます。

もちろん$children、クリックイベント後のある時点で（たとえば、後のイベントに応答して）変数を使用する場合は、クリックハンドラーの外部で変数を宣言する必要があります。

クリックまたはダブルクリックに応答してこれを行う場合はevent.stopPropagation()、これらのイベントがDOMを介して伝播するため、ネストされたli要素の1つのクリックイベントが親li要素にも伝播するため、使用する必要があります。

于 2012-08-27T21:28:18.243 に答える
1

この操作を実行するターゲット要素がである場合、次のelemように実行できます。

$(elem).find("li").insertAfter(elem);
$(elem).remove();

ここでの例：http：//jsfiddle.net/jfriend00/RrHB2/

これをdlbclickイベントに接続するには、次のようになります（適切なセレクターに入力して適切なアイテムをターゲットにします）。

$(selector).dblclick(function(e) {
    e.stopPropagation();
    var target = $(this);
    target.find("li").insertAfter(item);
    target.remove();
});

複数のレベルをサポートし、1つのレベルのみを折りたたむ場合は、次を使用できます。

var target = $("#removeme");
target.children("ul").children().insertAfter(target);
target.remove();

また

$(selector).dblclick(function() {
    e.stopPropagation();
    var target = $(this);
    target.children("ul").children().insertAfter(target);
    target.remove();
});

作業デモ： http： //jsfiddle.net/jfriend00/TbDY7/

于 2012-08-27T21:33:52.070 に答える
0 
$('elem').dbclick(function(e) {
    var elem = $(e.target);
    var children = elem.children();

    for (var i = children.length-1; i >= 0; i--)
       children[i].insertAfter(elem);

     elem.remove();
 }
于 2012-08-27T21:49:47.613 に答える