การค้นหา id ของ div พาเรนต์โดยใช้ Jquery

Question 1

ฉันมี 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!) ดังนั้นฉันจึงสามารถกำหนดปุ่มได้ไม่ขึ้นอยู่กับ id ของ div หลัก ในชีวิตจริงมีหลายส่วนที่มีลักษณะเช่นนี้

ฉันจะค้นหารหัสของ div เลี้ยงดูปุ่มได้อย่างไร
อะไรจะเป็นวิธีที่มีความหมายมากขึ้นในการจัดเก็บคำตอบในโค้ดปุ่ม ฉันต้องการทำให้สิ่งนี้เข้าใจผิดได้มากที่สุดสำหรับผู้ที่ไม่ใช่โปรแกรมเมอร์สามารถคัดลอกและวางโดยไม่ทำลายสิ่งต่างๆ!

Question 2

คุณสามารถใช้การมอบหมายเหตุการณ์บน div หลัก หรือใช้วิธีที่ใกล้เคียงที่สุดเพื่อค้นหาพาเรนต์ของปุ่ม

ง่ายที่สุดของทั้งสองน่าจะใกล้เคียงที่สุด

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

Question 3

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

โปรดจำไว้ว่าหากคุณใส่คำตอบในรหัสไคลเอนต์พวกเขาจะสามารถเห็นได้ :) วิธีที่ดีที่สุดในการดำเนินการนี้คือการตรวจสอบความถูกต้องของฝั่งเซิร์ฟเวอร์ แต่สำหรับแอปที่มีขอบเขต จำกัด อาจไม่ใช่ปัญหา

Question 4

ลองสิ่งนี้:

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

Question 5

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

Question 6

ในการรับ id ของ div พาเรนต์:

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

นอกจากนี้คุณสามารถ refactor รหัสของคุณได้เล็กน้อย:

$('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 ในกรณีนี้องค์ประกอบ 0 จึงเป็นองค์ประกอบแรก http://docs.jquery.com/Selectors/eq#index
$ (ตัวเลือก) พี่น้อง (ตัวเลือกพี่น้อง) จะเลือกพี่น้องทั้งหมด (องค์ประกอบที่มีพ่อแม่เดียวกัน) ที่ตรงกับพี่น้องตัวเลือกhttp://docs.jquery.com/Traversing /
brothers # expr $ (selector) .parents (parentSelector) จะเลือกผู้ปกครองทั้งหมดขององค์ประกอบที่จับคู่โดยตัวเลือกที่ตรงกับตัวเลือกหลัก http://docs.jquery.com/Traversing/parents#expr
ดังนั้น: $ (ตัวเลือก) .parents ('div: eq (0)'); จะตรงกับ div พาเรนต์แรกขององค์ประกอบที่ตรงกับตัวเลือก

คุณควรดูเอกสาร jQuery โดยเฉพาะตัวเลือกและการข้ามผ่าน:

Question 7

http://jsfiddle.net/qVGwh/6/ ตรวจสอบสิ่งนี้

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

Question 8

สามารถทำได้อย่างง่ายดายโดยทำ:

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

คุณแนบสิ่งนี้เข้ากับวัตถุใด ๆ ภายในตารางและจะส่งคืน id ของตารางนั้นให้คุณ

Question 9

JQUery มีเมธอด .parents () สำหรับการย้ายทรี DOM ที่คุณสามารถเริ่มได้ที่นั่น

หากคุณสนใจที่จะทำวิธีนี้ให้มีความหมายมากกว่านี้ฉันไม่คิดว่าการใช้แอตทริบิวต์ 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);
});

ไม่ค่อยแน่ใจว่าการตรวจสอบความถูกต้องและข้อเสนอแนะของคุณทำงานอย่างไร แต่คุณได้รับแนวคิด

Question 10

ค้นหา () และใกล้เคียงที่สุด () ดูเหมือนช้ากว่าเล็กน้อย:

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