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입니다!). 상위 div의 ID입니다. 실제 생활에는 이와 같은 여러 섹션이 있습니다.

1. 버튼을 부모로 지정하는 div의 ID를 어떻게 찾습니까?

2. 버튼 코드에 답변을 저장하는 더 의미있는 방법은 무엇입니까? 프로그래머가 아닌 사람이 내용을 깨지 않고 복사하여 붙여 넣을 수 있도록 가능한 한 완벽하게 만들고 싶습니다!

상위 div에서 이벤트 위임 을 사용할 수 있습니다 . 또는 가장 가까운 방법을 사용하여 버튼의 부모를 찾습니다.

둘 중 가장 쉬운 것이 아마도 가장 가까운 것입니다.

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

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

클라이언트 코드에 답을 넣으면 볼 수 있다는 점을 명심하십시오. 이렇게하는 가장 좋은 방법은 서버 측에서 유효성을 검사하는 것이지만 범위가 제한된 앱의 경우 문제가되지 않을 수 있습니다.

이 시도:

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

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

상위 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 객체에서 하나의 요소 (이 경우 요소 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)'); 선택기와 일치하는 요소의 첫 번째 상위 div와 일치합니다.

jQuery 문서, 특히 선택기와 순회를 살펴보아야합니다.

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

http://jsfiddle.net/qVGwh/6/ 확인

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

다음을 수행하여 쉽게 수행 할 수 있습니다.

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

이것을 테이블 내부의 모든 개체에 연결하면 해당 테이블의 ID를 반환합니다.

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

검증 및 피드백이 어떻게 작동하는지 확실하지 않지만 아이디어를 얻습니다.

find () 및 가장 가까운 ()은 다음보다 약간 느립니다.

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