Jqueryを使用して親divのIDを見つける

私はこのようないくつかの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. 答えをボタンコードに格納するためのよりセマンティックな方法は何でしょうか。私はこれをできるだけ簡単に、プログラマー以外の人が物事を壊すことなくコピーアンドペーストできるようにしたいと思います！

親divでイベントの委任を使用できます。または、nearestメソッドを使用して、ボタンの親を見つけます。

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

var id = $("button").closest("div").prop("id");

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);
});

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

これを試して：

$("button").click(function () {
    $(this).parents("div:first").html(...);
});

$(this).parents('div').attr('id');

親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ドキュメント、特にセレクターとトラバースを確認する必要があります。

• http://docs.jquery.com/
• http://docs.jquery.com/Selectors
• http://docs.jquery.com/Traversing

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

   $("#MadonwebTest").click(function () {
    var id = $("#MadonwebTest").closest("div").attr("id");
    alert(id);
    });

これは次のようにして簡単に行うことができます：

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

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

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);
});

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

find（）とnearest（）は次のものより少し遅いようです：

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