단순화 된 예제를 제공하기 위해 페이지에서 다음 블록을 여러 번 반복했습니다 (동적으로 생성됨).
<div class="box">
<div class="something1"></div>
<div class="something2">
<a class="mylink">My link</a>
</div>
</div>
클릭하면 다음을 사용하여 링크의 부모로 이동할 수 있습니다.
$(".mylink").click(function() {
$(this).parents(".box").fadeOut("fast");
});
그러나 … 나는 <div class="something1">
그 특정 부모 .
기본적으로 누군가 직접 참조하지 않고 상위 형제를 참조하는 방법을 알려줄 수 있습니까? 빅 브라더라고합시다. 빅 브라더의 클래스 이름을 직접 참조하면 페이지에서 해당 요소의 모든 인스턴스가 페이드 아웃 될 수 있습니다. 이는 원하는 효과가 아닙니다.
난 노력 했어:
parents(".box .something1") ... no luck.
parents(".box > .something1") ... no luck.
siblings() ... no luck.
누군가? 감사.
답변
호출 .parents(".box .something1")
하면 선택자와 일치하는 모든 부모 요소가 반환됩니다 .box .something
. 즉, .something1
내부에있는 부모 요소를 반환합니다..box
합니다.
다음과 같이 가장 가까운 부모의 자식을 가져와야합니다.
$(this).closest('.box').children('.something1')
이 코드 .closest
는 선택기와 일치하는 가장 안쪽 부모를 가져 오도록 호출 한 다음 .children
해당 부모 요소를 호출 하여 찾고있는 삼촌을 찾습니다.
답변
$(this).parent()
트리 순회는 재미있다
$(this).parent().siblings(".something1");
$(this).parent().prev(); // if you always want the parent's previous sibling
$(this).parents(".box").children(".something1");
그리고 훨씬 더 많은 방법으로이 문서가 도움 이 될 수 있습니다.
답변
이것은 클래스가있는 첫 번째 부모 box
를 찾은 다음 정규식이 일치하는 첫 번째 자식 클래스를 찾고 something
ID를 얻습니다.
$(".mylink").closest(".box").find('[class*="something"]').first().attr("id")
답변
귀하의 문제를 올바르게 이해했다면 $(this).parents('.box').children('.something1')
이것이 귀하가 찾고있는 것입니까?
답변
당신은 사용할 수 .each()
와 함께 .children()
괄호 내에서 선택과 :
//Grab Each Instance of Box.
$(".box").each(function(i){
//For Each Instance, grab a child called .something1. Fade It Out.
$(this).children(".something1").fadeOut();
});