Tìm id của div cha bằng Jquery

Tôi có một số html như thế này:

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

và một số JS như thế này:

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

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

Điều tôi thực sự muốn là nếu tôi không phải có class = "1" trên nút (tôi biết các lớp số không hợp lệ, nhưng đây là một WIP!), Vì vậy tôi có thể xác định buttonNo dựa trên id của div mẹ. Trong cuộc sống thực có nhiều phần trông như thế này.

1. Làm cách nào để tìm id của nút div làm cha mẹ.

2. Một cách ngữ nghĩa hơn để lưu trữ câu trả lời trong mã nút là gì. Tôi muốn làm cho điều này càng dễ hiểu càng tốt để một người không phải lập trình viên có thể sao chép và dán mà không làm hỏng mọi thứ!

Bạn có thể sử dụng ủy quyền sự kiện trên div chính. Hoặc sử dụng phương pháp gần nhất để tìm cha của nút.

Cái dễ nhất trong hai cái có lẽ là cái gần nhất.

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

1.

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

2.

Phải có một số lượng lớn các cách! Người ta có thể ẩn một phần tử có chứa câu trả lời, ví dụ:

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

Và sau đó có mã jQuery tương tự như trên để lấy điều đó:

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

Hãy nhớ rằng nếu bạn đặt câu trả lời trong mã máy khách thì họ có thể nhìn thấy nó :) Cách tốt nhất để làm điều này là xác thực nó ở phía máy chủ, nhưng đối với một ứng dụng có phạm vi hạn chế, điều này có thể không phải là vấn đề.

Thử cái này:

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

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

Để lấy id của div mẹ:

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

Ngoài ra, bạn có thể cấu trúc lại mã của mình khá nhiều:

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

Bây giờ không cần lớp nút

giải thích
eq (0), nghĩa là bạn sẽ chọn một phần tử từ đối tượng jQuery, trong trường hợp này là phần tử 0, do đó là phần tử đầu tiên. http://docs.jquery.com/Selectors/eq#index
$ (selector) .siblings (Anh chị em ruộtSelector) sẽ chọn tất cả các anh chị em (các phần tử có cùng cha mẹ) phù hợp với anh chị em ruộtSelector http://docs.jquery.com/Traversing / Anh / chị / em # expr
$ (selector). parent (Bộ chọn cha mẹ) sẽ chọn tất cả các phần tử cha mẹ của các phần tử được so khớp bởi bộ chọn phù hợp với bộ chọn mẹ. http://docs.jquery.com/Traversing/ooter#expr
Như vậy: $ (selector) .aries ('div: eq (0)'); sẽ khớp với div cha đầu tiên của các phần tử được khớp với bộ chọn.

Bạn nên xem các tài liệu jQuery, đặc biệt là các bộ chọn và duyệt:

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

http://jsfiddle.net/qVGwh/6/ Kiểm tra cái này

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

Điều này có thể dễ dàng thực hiện bằng cách:

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

Bạn đính kèm cái này vào bất kỳ đối tượng nào bên trong một bảng và nó sẽ trả về cho bạn id của bảng đó.

JQUery có một phương thức .arent () để di chuyển lên cây DOM mà bạn có thể bắt đầu ở đó.

Nếu bạn muốn thực hiện việc này theo cách ngữ nghĩa hơn, tôi không nghĩ rằng sử dụng thuộc tính REL trên một nút là cách tốt nhất để xác định ngữ nghĩa "đây là câu trả lời" trong mã của bạn. Tôi muốn giới thiệu một cái gì đó dọc theo những dòng sau:

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

và

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

Không hoàn toàn chắc chắn về cách xác thực và phản hồi của bạn đang hoạt động, nhưng bạn có ý tưởng.

find () và near () có vẻ hơi chậm hơn:

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