9

クリックイベントで親オブジェクトに要素を追加する方法を理解するのに問題があります。

私が達成したいと思っている結果はこれです：

<ul>
        <li><button>B1</button>
            <ul class="newul">
                <li><button>B1.1</button>
                    <ul class="newul">
                        <li><button>1.1.1</button></li>
                        <li><button>1.1.2</button></li>
                    </ul>
                </li>
                <li><button>B1.1</button></li>
            </ul>
        </li>
        <li><button>B2</button></li>
        <li><button>B3</button></li>
</ul>

ボタンB2をクリックするとします。そのボタンの親LIに新しいULを追加してから、新しく作成されたULに新しいLI要素を追加できるようにします。それが理にかなっていることを願っています！

したがって、基本的に、ボタンをクリックし、クラス「newul」の新しいULを現在のLIに追加します->新しく作成されたULに新しいLIを追加します。

私が現在使用しているjqueryは次のとおりです。

$('button').click(function(){
    //Get parent..
        var parent = $(this).parent();
        //Add a new UL to the parent and save it as newul           
        var newul = parent.add("ul");
                    //Add the class to the new UL
        newul.addClass('newul');               
        //Add a new li to the new UL            
            newli = newul.add('li');
            //Add a button to the new LI
            newli.append('<button></button>');

});

残念ながら、これは完全に望ましくない効果をもたらし、ボタンをいたるところに貼り付けます。私はあなたが提供できるどんな助けにも感謝します。

これが私が求めているものの目に見える例です。一番上の部分は、達成したい効果IDです。

望ましい結果の例

4

5 に答える 5

13

@amではありませんが、私は正しいコードを持っています。あなたのコードが失敗する理由の説明はありません、そして私はそれがあなたが求めている答えだと思います。

コードにはいくつかの問題があります。

初め

//Add a new UL to the parent and save it as newul           
var newul = parent.add("ul");

は'ul'セレクターであるため<ul>、新しい要素を作成するのではなく、DOMで他の要素を検索します。また、メソッドは、選択したulではなく、オブジェクトparent.add()を返します。parent

正しいコード：

//Add a new UL to the parent and save it as newul           
var newul = $("<ul>").appendTo(parent);

2番：

//Add a new li to the new UL            
newli = newul.add('li');

同じ問題が再び発生しますnewulが、実際にはまだparentすべての種類の狂気が発生しています。また、あなたはを逃していますvarが、多分私はあなたの閉鎖を取得していません。

正しいコード：

//Add a new li to the new UL         
var newli = $("<li>").appendTo(newul);

それで全部です。コードでそれを修正すれば、うまくいくでしょう。

ただし、これらの参照を永続化する必要が本当にない限り、通常、すべてを文字列として渡すと、パフォーマンスが向上します。

$('button').click( function() {

  $(this).parent()
    .append(
      $('<ul class="newul"><li><button></li></ul>')
    );
});

編集

また、すべての新しいボタンに同じ機能を持たせたい場合は、ボタンのon()メソッドとクラスを使用します。

$('body').on('click', 'button.ul-appending', function() {

  $(this).parent()
    .append(
      $('<ul class="newul"><li><button class="ul-appending"></li></ul>')
    );
});

セレクターをもっと具体的なものに変更し'body'て、ページをクリックするたびに照会されないようにすることができます。ul-appendingこのハンドラーによって生成されない既存のすべてのボタンにクラスを追加してください。

JSFiddle

于 2012-06-28T16:58:26.293 に答える
1

ここで私が目にする問題の1つは、作成された新しいボタンにクリックイベントがバインドされないことです。onイベントをデリゲートとして使用および設定することで、これを修正します。そうすることで、私はアウターにulのidを与えcontainerます。また、要素がまだ追加されていないことを確認し、ul要素が内にない場合は追加しますli。 これが実際の例です。

$('#container').on("click", "button.newbtn", function(){
    var parent = $(this).closest('li');
    var childUl = parent.children('ul');
    if(childUl.length === 0) {
        parent.append("<ul class='newul'></ul>");
        childUl = parent.children('ul');       
    }
    childUl.append($("<li><button class='newbtn'>" + $(this).html() + "." + (childUl.children().length + 1) + "</button></li>"));
});​
于 2012-06-28T16:39:29.740 に答える
0 
$('button').click(function(){
         //Get parent..
        var parent = $(this).parent();

        //Add a new UL to the parent and save it as newul           
        var newul = $("<ul/>");

        //Add the class to the new UL
        newul.addClass('newul');               

        //Add a new li to the new UL            
        var newli = $('<li/>');

        //Add a button to the new LI
        newli.append('<button></button>');

        // add ul to parent li
        parent.append( newul.append( newli ) );

});
于 2012-06-28T16:27:26.967 に答える
0

ここでの問題は、.after（）の代わりに.add（ ）を使用していることです。

.add()渡された要素を現在の選択に追加します。.after()現在の選択の後に渡された要素を追加します。

を使用.after()すると、スクリプトを単純化して、素敵な1つのライナーにすることができます。

$('button').click(function(){
    $(this).after('<ul class="newul"><li><button></button></li></ul>');
});​

.after()現在の要素の横にコンテンツを挿入するため、を取得する必要はありません.parent()。.after()HTMLの完全な文字列を受け取ることができるため、jQueryを使用してクラスを操作したり子要素を追加したりする必要はありません。

例。

于 2012-06-28T16:33:07.790 に答える
0

動的に追加される要素には.on関数を使用します。

このようなものを使用できます。

$(document).ready(function(){
    i = 1;
    $('body').on("click","button",function(event){
        $(this).after('<ul class="newul"><li><button>TestButton'+i+'</button></li></ul>');
        i++;
    });
});

これがデモです。それに応じて、cssとボタンの値でボタンを調整します。

</ p>

于 2012-06-28T17:19:32.113 に答える