Menemukan id dari div induk menggunakan Jquery

Saya punya beberapa html seperti ini:

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

dan beberapa JS seperti ini:

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

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

Yang benar-benar saya inginkan adalah jika saya tidak harus memiliki class = "1" pada tombol (saya tahu kelas numerik tidak valid, tapi ini adalah WIP!), Jadi saya bisa menentukan tombolTidak berdasarkan id dari div induk. Dalam kehidupan nyata, ada banyak bagian yang terlihat seperti ini.

1. Bagaimana cara menemukan id dari tombol parenting div.

2. Apa cara yang lebih semantik untuk menyimpan jawaban dalam kode tombol. Saya ingin membuat ini semudah mungkin bagi non programmer untuk menyalin dan menempel tanpa merusak sesuatu!

Anda bisa menggunakan delegasi acara di div induk. Atau gunakan metode terdekat untuk menemukan induk tombol.

Yang termudah dari keduanya mungkin yang paling dekat.

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

1.

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

2.

Pasti ada banyak cara! Salah satunya adalah menyembunyikan elemen yang berisi jawabannya, misalnya

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

Dan kemudian miliki kode jQuery yang mirip dengan yang di atas untuk mengambilnya:

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

perlu diingat bahwa jika Anda memasukkan jawaban dalam kode klien maka mereka dapat melihatnya :) Cara terbaik untuk melakukannya adalah dengan memvalidasinya di sisi server, tetapi untuk aplikasi dengan cakupan terbatas, hal ini mungkin tidak menjadi masalah.

Coba ini:

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

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

Untuk mendapatkan id dari div induk:

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

Selain itu, Anda dapat sedikit merefaktor kode Anda:

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

Sekarang tidak perlu kelas tombol

Penjelasan
eq (0), artinya Anda akan memilih salah satu elemen dari objek jQuery, dalam hal ini elemen 0, demikian elemen pertama. http://docs.jquery.com/Selectors/eq#index
$ (selector) .siblings (siblingsSelector) akan memilih semua saudara (elemen dengan induk yang sama) yang cocok dengan siblingsSelector http://docs.jquery.com/Traversing / siblings # expr
$ (selector) .parents (parentSelector) akan memilih semua elemen induk yang cocok dengan selektor yang cocok dengan pemilih induk. http://docs.jquery.com/Traversing/parents#expr
Jadi: $ (selector) .parents ('div: eq (0)'); akan cocok dengan div induk pertama dari elemen yang cocok dengan selector.

Anda harus melihat dokumen jQuery, khususnya penyeleksi dan traverse:

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

http://jsfiddle.net/qVGwh/6/ Periksa ini

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

Ini dapat dengan mudah dilakukan dengan melakukan:

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

Anda melampirkan ini ke objek apa pun di dalam tabel dan itu akan mengembalikan Anda id dari tabel itu.

JQUery memiliki metode .parents () untuk naik pohon DOM Anda bisa memulainya dari sana.

Jika Anda tertarik untuk melakukan ini dengan cara yang lebih semantik, menurut saya menggunakan atribut REL pada tombol adalah cara terbaik untuk mendefinisikan secara semantik "ini adalah jawabannya" dalam kode Anda. Saya akan merekomendasikan sesuatu seperti ini:

<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>

dan

$("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);
});

Tidak begitu yakin bagaimana validasi dan umpan balik Anda bekerja, tetapi Anda mendapatkan idenya.

find () dan terdekat () tampaknya sedikit lebih lambat dari:

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