다음과 같은 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입니다. 실제 생활에는 이와 같은 여러 섹션이 있습니다.
-
버튼을 부모로 지정하는 div의 ID를 어떻게 찾습니까?
-
버튼 코드에 답변을 저장하는 더 의미있는 방법은 무엇입니까? 프로그래머가 아닌 사람이 내용을 깨지 않고 복사하여 붙여 넣을 수 있도록 가능한 한 완벽하게 만들고 싶습니다!
답변
상위 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</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://jsfiddle.net/qVGwh/6/
확인
$("#MadonwebTest").click(function () {
var id = $("#MadonwebTest").closest("div").attr("id");
alert(id);
});
답변
다음을 수행하여 쉽게 수행 할 수 있습니다.
$(this).closest('table').attr('id');
이것을 테이블 내부의 모든 개체에 연결하면 해당 테이블의 ID를 반환합니다.