100

次のようなhtmlがあります。

<div id="1">
    <p>
        Volume = <input type="text" />
        <button rel="3.93e-6" class="1" type="button">Check answer</button>
    </p>
    <div></div>
</div>

そして、次のようないくつかのJS:

$("button").click(function () {
    var buttonNo = $(this).attr('class');
    var correct = Number($(this).attr('rel'));

    validate (Number($("#"+buttonNo+" input").val()),correct);
    $("#"+buttonNo+" div").html(feedback);
});

私が本当に望むのは、ボタンに class="1" を設定する必要がない場合です (数値クラスが有効でないことはわかっていますが、これは WIP です!)。親divのID。実際には、このように見えるセクションが複数あります。

  1. ボタンを親にするdivのIDを見つけるにはどうすればよいですか。

  2. ボタンコードに答えを保存するより意味のある方法は何でしょうか。プログラマー以外の人が物事を壊すことなくコピーして貼り付けることができるように、これをできるだけ簡単にしたいと思います!

4

9 に答える 9

212

親divでイベント委任を使用できます。または、最も近い方法を使用して、ボタンの親を見つけます。

2つのうち最も簡単なものがおそらく最も近いものです。

var id = $("button").closest("div").prop("id");
于 2009-02-13T14:10:17.087 に答える
47

1.

$(this).parent().attr("id");

2.

たくさんの方法があるはずです!答えを含む要素を非表示にすることもできます。

<div>
    Volume = <input type="text" />
    <button type="button">Check answer</button>
    <span style="display: hidden">3.93e-6&lt;/span>
    <div></div>
</div>

そして、それをつかむために上記と同様のjQueryコードを用意します:

$("button").click(function () 
{
    var correct = Number($(this).parent().children("span").text());
    validate ($(this).siblings("input").val(),correct);
    $(this).siblings("div").html(feedback);
});

答えをクライアントコードに入れると、彼らはそれを見ることができることに注意してください:)これを行う最良の方法は、サーバー側で検証することですが、範囲が限られたアプリの場合、これは問題にならない場合があります.

于 2009-02-13T13:51:39.877 に答える
11

これを試して:

$("button").click(function () {
    $(this).parents("div:first").html(...);
});
于 2009-02-13T13:51:28.300 に答える
7

親 div の ID を取得するには:

$(buttonSelector).parents('div:eq(0)').attr('id');

また、コードをかなりリファクタリングできます。

$('button').click( function() {
 var correct = Number($(this).attr('rel'));
 validate(Number($(this).siblings('input').val()), correct);
 $(this).parents('div:eq(0)').html(feedback);
});

ボタンクラスは不要になりました

説明
eq(0) は、jQuery オブジェクトから 1 つの要素を選択することを意味します。この場合は要素 0、つまり最初の要素です。http://docs.jquery.com/Selectors/eq#index
$(selector).siblings(siblingsSelector) は、siblingsSelector http://docs.jquery.com/Traversingに一致するすべての兄弟 (同じ親を持つ要素) を選択します。 /siblings#expr
$(selector).parents(parentsSelector) は、親セレクターに一致するセレクターに一致する要素のすべての親を選択します。http://docs.jquery.com/Traversing/parents#expr
したがって: $(selector).parents('div:eq(0)'); セレクターによって一致した要素の最初の親 div と一致します。

jQuery ドキュメント、特にセレクターとトラバースを確認する必要があります。

于 2009-02-13T13:50:36.697 に答える
6

http://jsfiddle.net/qVGwh/6/ これをチェック

   $("#MadonwebTest").click(function () {
    var id = $("#MadonwebTest").closest("div").attr("id");
    alert(id);
    });
于 2013-03-25T10:24:22.527 に答える
5

これは、次のようにして簡単に実行できます。

$(this).closest('table').attr('id');

これをテーブル内の任意のオブジェクトにアタッチすると、そのテーブルの ID が返されます。

于 2012-10-25T10:01:45.147 に答える
3

JQUEry には、そこから開始できる DOM ツリーを上に移動するための .parents() メソッドがあります。

これをよりセマンティックな方法で行うことに興味がある場合、ボタンで REL 属性を使用することは、コードで「これが答えです」をセマンティックに定義する最良の方法ではないと思います。私はこれらの行に沿って何かをお勧めします:

<p id="question1">
    <label for="input1">Volume =</label> 
    <input type="text" name="userInput1" id="userInput1" />
    <button type="button">Check answer</button>
    <input type="hidden" id="answer1" name="answer1" value="3.93e-6" />
</p>

$("button").click(function () {
    var correctAnswer = $(this).parent().siblings("input[type=hidden]").val();
    var userAnswer = $(this).parent().siblings("input[type=text]").val();
    validate(userAnswer, correctAnswer);
    $("#messages").html(feedback);
});

検証とフィードバックがどのように機能しているかはよくわかりませんが、アイデアはわかります。

于 2009-02-13T14:03:21.703 に答える
0

find() および closest() は、次のものよりわずかに遅いようです。

$(this).parent().attr("id");
于 2017-11-08T21:51:10.303 に答える