web-dev-qa-db-ja.com

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です！）、に基づいてbuttonNoを決定できます親divのID。実際には、このような複数のセクションがあります。

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

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

jquerydomsemantics
99
Rich Bradshaw

親divで event delegation を使用できます。または、 closest メソッドを使用して、ボタンの親を見つけます。

2つの中で最も簡単なものがおそらく最も近いでしょう。

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

1。

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

2。

たくさんの方法があるはずです！ 1つは、回答を含む要素を非表示にすることです。

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

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

48
Robert Grant

これを試して：

$("button").click(function () {
    $(this).parents("div:first").html(...);
});
11
Buu Nguyen
$(this).parents('div').attr('id');
9
Ashish Sajwan

親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）'）; selectorに一致した要素の最初の親divに一致します。

JQueryのドキュメント、特にセレクターとトラバースをご覧ください。

7
Pim Jager

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

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

これは、以下を行うことで簡単に実行できます。

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

これをテーブル内のオブジェクトに添付すると、そのテーブルのIDが返されます。

5
Hamid

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

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

3
Parrots

find（）とclosest（）は以下よりもわずかに遅いようです：

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