3

それが正しい用語でさえあると仮定すると、彼らとの取引は何ですか?

jQuery("#removeUser", jQuery(myform)).click(
    function()
    {
        jQuery(this).parent().parent().remove(); 
    }); 

したがって、上記のコードでは、コンストラクターに2つの引数が必要であるように見えます。最初のパラメーターは「removeUser」と呼ばれるHTML要素のIDを取り、もう1つは実際にはvarであり、これはHTML要素とそのネストされた子のコレクション全体の文字列です。

基本的に、上記のコードは、誰かが「removeUser」ボタンをクリックしたときにフォームを削除します。元のコードをコピーして変更しましたが、(ある程度は)機能しますが、ここで何が起こっているのか完全には理解していません。

「#removeUser」要素のみを使用して新しいjQueryインスタンスを作成しようとすると、希望する結果が得られませんでした。1人の「ユーザー」だけを削除するのではなく、すべての「ユーザー」を削除しました。ですから、ここで私がまったく理解していないことが起こっています。

それで、関数の中で、「this」は誰ですか?それはremoveUser要素ですか、それとも文字列ですか?私は困惑している!

============

アップデート:

したがって、CoryとTorsten Walterのコメントに基づいて、jQueryの「コンストラクター」に次のようなものを与えることができます。

    jQuery("#removeUser", "<tr name=parent1><td>User: </td><td name=parent2><button id=\"removeUser\">remove</button></td></tr>").click(
    function()
    {
        jQuery(this).parent().parent().remove(); 
    }
);

または、「jQuery」を使用したくない人のために、次のようにします。

    $("#removeUser", "<tr name=parent1><td>User: </td><td name=parent2><button id=\"removeUser\">remove</button></td></tr>").click(
    function()
    {
        $(this).parent().parent().remove(); 
    }
);

また、一意でないIDの使用を嫌う人もいることに気づいたので、次のようなものを使用できます。

    $("button", "<tr name=parent1><td>User: </td><td name=parent2><button>remove</button></td></tr>").click(
    function()
    {
        $(this).parent().parent().remove(); 
    }
);

なぜなら、すべての「ユーザー」はとにかくボタンを1つしか持っていないからです。

また、代わりにクラスを使用することを提案する人もいます。2番目の引数を使用しないというアドバイスに加えて、それは私が望む結果を私に与えませんでした。

    $(".removeUser", "<tr name=parent1><td>User: </td><td name=parent2><button class=\"removeUser\">remove</button></td></tr>").click(
    function()
    {
        $(this).parent().parent().remove(); 
    }
);

上記はすべての「ユーザー」を削除しますが、これは私が望んでいることではありません。

============

アップデート:

また、「parent1」と「parent2」のことは間違っていますよね?実際にはparent1にアクセスしていませんか?

私が実際にmyformに持っているのは、次のとおりです。

var myform = "<table>"+ //<---parent 1, right?
                    "  <tr>" + //<--parent 2?
                    "     <td>User " + jQuerycountForms + ":</td>" + 
                    "     <td>UserID:&nbsp;</td>" + 
                    "     <td><input type='text' name='UserID["+jQuerycountForms+"]'></td>" + 
                    "     <td>Roles:&nbsp;</td>" + 
                    "     <td><textarea name='Roles["+jQuerycountForms+"]'></textarea></td>" + 
                    "     <td><button id=\"removeUser\" onclick=\"jQuerycountForms--;\">remove</button></td>" + //Or, is that "td" parent2?
                    "  </tr><br/>"+
                    "</table>";

私のHTMLには、次のようなものがあります。

<div id="container">
            <table>
                <tr>
        <td><button id="addUser" type="button">add</button></td>
                </tr>
            </table>
        </div>

「addUser」ボタンが行うことは、別のユーザーを追加することです。この要素に接続された新しいユーザーの追加を実行するjQueryjavascriptがいくつかあります。

table変数の外部要素を削除しようとするとmyform、削除されたユーザーをクリックするたびに問題が発生しました。結局起こったことは、私が最初のテーブル全体を削除することになったということでした。

したがって、次の値myform

    var myform = "  <tr>" + //Now the "table" element shown earlier in the HTML is parent1!
                    "     <td>User " + jQuerycountForms + ":</td>" + 
                    "     <td>UserID:&nbsp;</td>" + 
                    "     <td><input type='text' name='UserID["+jQuerycountForms+"]'></td>" + 
                    "     <td>Roles:&nbsp;</td>" + 
                    "     <td><textarea name='Roles["+jQuerycountForms+"]'></textarea></td>" + 
                    "     <td><button id=\"removeUser\" onclick=\"jQuerycountForms--;\">remove</button></td>" + 
                    "  </tr><br/>";

addもうボタン がなくなるでしょう。

それで、removeUserボタンの両親は誰ですか?どちらが最も近い親であり、誰がその親ですか?

Javascriptなので、HTMLにどのような変更が加えられているのか実際にはわかりません。これがJavaでレンダリングされている場合、変更はHTMLソースに反映されます。しかし、これで、私は物事を理解するための私の想像力に取り残されているようです。また、Javascriptにあまり詳しくない場合は、何が起こっているのかを確認するのが難しい場合があります。

============

アップデート:

したがって、1人のユーザーをクリックした後のHTMLがどのようになるかについての私の推測は次のとおりです。

        <div id="container">
            <table>
        <tr>
        <td><button id="addUser" type="button">add</button></td>
        <table> <!-- Well, I'm definitely the grand parent. -->
            <tr> <!-- But, am I anyone's parent? -->
                <td>User 0:</td>
                <td>UserID:&nbsp;</td>
                <td><input type='text' name='UserID[0]'></td>
                <td>Roles:&nbsp;</td>
                <td><textarea name='Roles[0]'></textarea></td>
                <td> <!-- Or, am I the daddy? -->
                    <button id=removeUser onclick="jQuerycountForms--;">remove</button>
                </td>
            </tr><br/>
                    </table>
                </tr>
            </table>
        </div>

したがって、基本的に、私の質問の2番目の部分は、「最初にアクセスされる親(pa​​rent2)は誰ですか?」です。tdそれともtr要素ですか?なぜそれtrがの親だと思わないのtdですか?確かにそうです。

============

アップデート:

これは、CoryのjsFiddleリンクへの応答です(ありがとう、ところで、これは便利なツールのようです)。次のコードは構造を示しています

var button = $('.removeUser');
alert("Me = " + button[0].tagName); //button
alert("Parent = " + button.parent()[0].tagName); // td
alert("Grand-Parent = " + button.parent().parent()[0].tagName); // tr
alert("Great Grand-Parent = " + button.parent().parent().parent()[0].tagName); // tbody
alert("Great, Great Grand-Parent = " + button.parent().parent().parent().parent()[0].tagName); // table

だから、これをまっすぐにしましょう。これが実際のOOPの種類の言語である場合、次のようなものになります。

Jquery button = new Jquery('.removeUser');

このjQuery「クラス」は実際にはある種のコレクションですが、どうやら、その中には1人のメンバーしかいませんか?単一のメンバーには、他の属性とともに「tagName」などの属性があります。

ただし、jQueryクラス自体には、ユーザーがDOMツリー(このツリーのルートに対して)をナビゲートできるようにするメソッドがあります。

「removeUser」ボタンが2つある場合は、button[1]にも配列表記を使用できることがわかりました。ただし、もちろん、複数の親を持つことはできないため、親は機能しparent()[1]ません。

通常、jQueryが「tagName」プロパティを所有していると想定していましたが、そうではないようです。代わりに、そのプロパティはこの配列のメンバーに属します。とにかく、これらの配列メンバーが所有する属性を検索するにはどうすればよいですか?

4

5 に答える 5

2

$(foo, bar)多かれ少なかれ、のための単なる糖衣です$(bar).find(foo)$(bar)それ自体は、次のタイプに応じて3つのまったく異なる意味を持ちますbar

  • が関数の場合bar、ドキュメントが読み込まれるとすぐに実行します。
  • HTMLタグを含む文字列の場合は、そこからDOMフラグメント(基本的にはWebページの一部ですが、現在のページに添付されておらず、空中に浮かんでいます)を作成します。
  • それ以外の場合は、セレクターとして扱い、現在のページで一致する要素を見つけようとします。

つまり、指定されたコンテンツで$("#removeUser", "<tr>...</tr>").click(...)新しいtr要素を作成し、その中から正しいIDを持つ要素を選択して、それにクリックハンドラーをアタッチします。後で要素を現在のページに追加しない限り、ページの一部ではない切り離された要素にスタッフを配置しているため、これは何の効果もありません。

于 2012-08-07T16:23:44.850 に答える
1

コードを説明する前に、いくつかのことを説明します。競合のないモードでない限り、コードを短縮するため$に代わりに使用できます。jQuery

var myform = '#something'; // not sure what this should be
$("#removeUser", $(myform)).click(function() {
    $(this).parent().parent().remove(); 
});

私が見るものはこれです:

要素内で$(myform)、クリックイベントを検索して要素にバインドします#removeUser。クリックイベント関数のthis内部は、IDが#removeUser(jQueryオブジェクトではない)DOM要素です。あなたはその親の親を求めており、それをDOMから削除しようとしています。

jQuery関数に2つの引数は必要ありません。jQueryが指定したセレクターを適用しようとする場所にコンテキストを制限するために、秒を指定できます。ただし、ページに複数のremoveUserIDを含めるべきではないため、2番目のパラメーターを削除し、フォーム削除コードを単純化することでクリーンアップすることができます。

$("#removeUser").click(function() {
    $(this).parents('form:first').remove();
    // or $(this).closest('form').remove(); as others have suggested
});

更新

ここでの真の「ユーザー」コンテナがテーブル行(<tr>)であるとすると、上記の例を変更する方法は次のとおりです。

まず、myformコードを少し変更して、ボタンとテーブルの行がクラス名を使用するようにします(CSSではなく、jQueryがID以外のものを使用してそれらを選択できるようにするためだけです)。

var myform = "<table>" + 
                "  <tr class=\"userRow\">" + 
                "     <td>User " + jQuerycountForms + ":</td>" + 
                "     <td>UserID:&nbsp;</td>" + 
                "     <td><input type='text' name='UserID["+jQuerycountForms+"]'></td>" + 
                "     <td>Roles:&nbsp;</td>" + 
                "     <td><textarea name='Roles["+jQuerycountForms+"]'></textarea></td>" + 
                "     <td><button class=\"removeUser\" onclick=\"jQuerycountForms--;\">remove</button></td>" + 
                "  </tr><br/>"+
                "</table>";

親構造に関して:に関連して<button>、その周囲<td>最初の親です。<td>'の親は(<tr>2番目の親)であり、<tr>'の親は<table>(3番目の親)です。前述したように、クラス名を使用するように上記を変更したので、親構造を忘れることができます。jQueryに階層を掘り下げてもらいましょう。

「ユーザーの削除」イベントをバインドするために使用するJSは、次のように変更されます。

$('.removeUser').click(function() { // ID selector changed to class selector
    $(this).parents('tr.userRow').remove();
});

技術的には、「userRow」クラスをに追加することを忘れて、次を<tr>使用することができます。

$('.removeUser').click(function() { // ID selector changed to class selector
    $(this).closest('tr').remove();
});

短くて甘い。.parent()当て推量やIDの重複の心配がなく、簡単に保守できます。

于 2012-08-07T15:45:26.793 に答える
1

最初にコードをクリーンアップしましょう:

$("#removeUser").click(function(){
    $(this).closest('form').remove(); 
}); 

jQueryセレクターの2番目のパラメーターは必要ありませんthis。渡されたオブジェクト(この場合はhtml要素)を参照します#removeUser

closest()指定した最初の要素が見つかるまでDOMを検索します。ここでフォームの最初のインスタンスを探していると仮定しています。

これが当てはまるかどうかはわかりませんが、ページに表示しているユーザーごとにフォームがあり、各フォーム内にユーザーを削除するためのボタンがあるようです。その場合はremoveUser、Idの代わりにクラスを使用する必要があります。this次に、私のコードは、クリックしたボタンであり、ボタンが含まれているフォームが見つかるまでそのボタンから検索し、そのフォームのみを削除するため、引き続き正常に機能します。

于 2012-08-07T15:46:53.360 に答える
1

あなたは当然混乱しています。コードは実際には意味がありません。

IDは一意である必要があるため、ユーザーを特定のフォームにフィルターで削除する理由はありません。これは機能しないため、指定されたIDを持つページの最初の要素を選択するだけです。

以下のコードは、コードと同じことを行います。

jQuery("#removeUser").click(function(){
    jQuery(this).parent().parent().remove(); 
});

.parent().parent()パーツはおそらくjQuery(this).closest("form");またはjQuery(this).closest("tr");などである必要があります。

実際に重複するIDがある場合は、提供したスニペットの代わりに置き換えid="removeUser"class="removeUser"から使用してください。.removeUser#removeUser

于 2012-08-07T15:49:04.983 に答える
1

this内側はfunction() { }クリックされた要素です。クリックイベントをID「removeUser」の要素にバインドしたので、それthisがクリックイベントハンドラーで参照される要素です。jQuery(this).parent().parent()はフォーム要素を取得している可能性がありますが、それはフォームの作成方法と「removeUser」要素がフォーム内のどこにあるかによって異なります。

于 2012-08-07T15:44:36.730 に答える