Jquery kullanarak bir üst div'in kimliğini bulma

Bunun gibi bazı html'm var:

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

ve bunun gibi bazı 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);
});

Gerçekten istediğim şey, düğmede sınıf = "1" olması gerekmeseydi (sayısal sınıfların geçerli olmadığını biliyorum, ancak bu bir Devam Eden Çalışma!), Böylece düğmeyi üst div kimliği Gerçek hayatta buna benzeyen birden fazla bölüm vardır.

1. Düğmeye ebeveynlik yapan div kimliğini nasıl bulabilirim.

2. Cevabı düğme kodunda saklamanın daha anlamsal bir yolu ne olabilir? Programcı olmayan birinin bir şeyleri bozmadan kopyalayıp yapıştırması için bunu olabildiğince kusursuz hale getirmek istiyorum!

Üst div'de olay yetkilendirmesini kullanabilirsiniz . Veya düğmenin üst öğesini bulmak için en yakın yöntemi kullanın.

İkisinin en kolayı muhtemelen en yakın olanıdır.

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

1.

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

2.

Çok sayıda yol olmalı! Cevabı içeren bir öğeyi gizlemek olabilir, örn.

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

Ve sonra, bunu almak için yukarıdakine benzer jQuery koduna sahip olun:

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

Unutmayın ki yanıtı istemci koduna koyarsanız, onlar da görebilir :) Bunu yapmanın en iyi yolu, onu sunucu tarafında doğrulamaktır, ancak sınırlı kapsamı olan bir uygulama için bu bir sorun olmayabilir.

Bunu dene:

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

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

Üst div kimliğini almak için:

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

Ayrıca, kodunuzu epeyce yeniden düzenleyebilirsiniz:

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

Artık bir düğme sınıfına gerek yok

açıklama
eq (0), jQuery nesnesinden bir öğe seçeceğiniz anlamına gelir, bu durumda öğe 0, dolayısıyla ilk öğe. http://docs.jquery.com/Selectors/eq#index
$ (selector) .siblings (siblingsSelector), siblingsSelector http://docs.jquery.com/Traversing ile eşleşen tüm kardeşleri (aynı ebeveyni olan öğeler) seçecektir. / siblings # ifade
$ (selector) .parents (parentSelector), üst seçiciyle eşleşen seçici tarafından eşleşen öğelerin tüm üst öğelerini seçer. http://docs.jquery.com/Traversing/parents#expr
Böylece: $ (selector) .parents ('div: eq (0)'); seçici ile eşleşen öğelerin ilk üst div'i ile eşleşir.

JQuery belgelerine, özellikle seçicilere ve geçişlere bir göz atmalısınız:

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

http://jsfiddle.net/qVGwh/6/ Bunu kontrol edin

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

Bu, aşağıdakileri yaparak kolayca yapılabilir:

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

Bunu bir tablonun içindeki herhangi bir nesneye iliştirirsiniz ve size o tablonun kimliğini döndürür.

JQUery, DOM ağacını yukarı taşımak için .parents () yöntemine sahiptir, buradan başlayabilirsiniz.

Bunu daha anlamsal bir şekilde yapmakla ilgileniyorsanız, kodunuzda "yanıt budur" u anlamsal olarak tanımlamanın en iyi yolunun bir düğmede REL özniteliğini kullanmak olduğunu düşünmüyorum. Bu satırlarda bir şey tavsiye ederim:

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

ve

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

Doğrulama ve geri bildiriminizin nasıl çalıştığından tam olarak emin değilim, ancak fikri anladınız.

find () ve near () şunlardan biraz daha yavaş görünüyor:

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