Jquery를 사용하여 부모 디바의 ID 찾기

Jquery를 사용하여 부모 디바의 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!) 부모 디바의 ID를 기준으로 No 버튼을 결정할 수 있습니다.실제 생활에서는 이와 같이 여러 섹션이 있습니다.

1. 버튼을 양육하는 디브의 아이디를 어떻게 찾을 수 있나요?

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

상위 디브에서 이벤트 위임을 사용할 수 있습니다.또는 가장 가까운 방법을 사용하여 단추의 상위를 찾습니다.

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

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

부모 디바의 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).형제자매(sibringsSelector)는 형제자매와 일치하는 모든 형제자매(부모가 동일한 elements)를 선택합니다. 셀렉터 http://docs.jquery.com/Traversing/siblings#expr
$(selector).부모(parentSelector)는 부모 선택기와 일치하는 선택기별 요소의 부모를 모두 선택합니다.http://docs.jquery.com/Traversing/parents#expr
따라서 $(선택기).부모 ('div: eq(0)')는 셀렉터별로 일치하는 요소의 첫 번째 부모 div와 일치합니다.

jQuery 문서, 특히 selector와 traversing을 살펴보아야 합니다.

• 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 트리를 위로 이동하기 위한 .parent() 메서드가 있습니다.

좀 더 의미적인 방법으로 이 작업을 수행하고 싶다면 버튼에 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);
});

검증 및 피드백이 어떻게 작동하는지는 잘 모르겠지만 아이디어는 얻을 수 있습니다.

()를 찾고 가장 가까운 ()은 다음보다 약간 느려 보입니다.

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

언급URL : https://stackoverflow.com/questions/545978/finding-the-id-of-a-parent-div-using-jquery