それが正しい用語でさえあると仮定すると、彼らとの取引は何ですか?
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: </td>" +
" <td><input type='text' name='UserID["+jQuerycountForms+"]'></td>" +
" <td>Roles: </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: </td>" +
" <td><input type='text' name='UserID["+jQuerycountForms+"]'></td>" +
" <td>Roles: </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: </td>
<td><input type='text' name='UserID[0]'></td>
<td>Roles: </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番目の部分は、「最初にアクセスされる親(parent2)は誰ですか?」です。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」プロパティを所有していると想定していましたが、そうではないようです。代わりに、そのプロパティはこの配列のメンバーに属します。とにかく、これらの配列メンバーが所有する属性を検索するにはどうすればよいですか?