$(this) 선택자의 자식을 얻는 방법은 무엇입니까?

질문자 :Alex

다음과 비슷한 레이아웃이 있습니다.

 <div id="..."><img src="..."></div>

jQuery 선택기를 사용하여 클릭 시 div 내부의 img

div 를 얻으려면 다음 선택기가 있습니다.

 $(this)

선택기를 사용하여 img 를 얻으려면 어떻게 해야 합니까?

jQuery 생성자는 선택의 컨텍스트를 재정의하는 데 사용할 수 있는 context 라는 두 번째 매개변수를 허용합니다.

 jQuery("img", this);

.find() 를 사용하는 것과 같습니다.

 jQuery(this).find("img");

당신이 원하는 imgs가 클릭 된 요소의 직계 자손 인 경우에, 당신은 또한 사용할 수 있습니다 .children() :

 jQuery(this).children("img");

Simon

당신은 또한 사용할 수 있습니다

 $(this).find('img');

div 자손인 img 반환합니다.

philnash

정확히 한 수준 아래에 있는 첫 번째 img 를 가져와야 하는 경우 다음을 수행할 수 있습니다.

 $(this).children("img:first")

rakslice

DIV 태그 바로 뒤에 IMG 태그가 오는 경우 다음을 사용할 수도 있습니다.

 $(this).next();

Roccivic

직계 자녀는

 $('> .child-class', this)

Rayron Victor

아래와 같이 부모 div의 img 요소를 찾을 수 있습니다.

 $(this).find('img') or $(this).children('img')

img 요소를 원하면 다음과 같이 작성할 수 있습니다.

 $(this).children('img:nth(n)') // where n is the child place in parent list start from 0 onwards

img 요소가 하나만 포함되어 있습니다. 그래서 아래가 맞다.

 $(this).find("img").attr("alt") OR $(this).children("img").attr("alt")

그러나 div에 아래와 같은 img 요소가 더 포함되어 있으면

 <div class="mydiv"> <img src="test.png" alt="3"> <img src="test.png" alt="4"> </div>

그러면 상위 코드를 사용하여 두 번째 img 요소의 alt 값을 찾을 수 없습니다. 그래서 당신은 이것을 시도할 수 있습니다:

 $(this).find("img:last-child").attr("alt") OR $(this).children("img:last-child").attr("alt")

이 예제는 부모 개체 내에서 실제 개체를 찾는 방법에 대한 일반적인 아이디어를 보여줍니다. 클래스를 사용하여 자녀의 개체를 구별할 수 있습니다. 쉽고 재미있습니다. 즉

 <div class="mydiv"> <img class='first' src="test.png" alt="3"> <img class='second' src="test.png" alt="4"> </div>

아래와 같이 할 수 있습니다.

 $(this).find(".first").attr("alt")

다음과 같이 더 구체적입니다.

 $(this).find("img.first").attr("alt")

위의 코드와 같이 find 또는 children을 사용할 수 있습니다. 더 방문을 위해 아이들은 http://api.jquery.com/children/ 하고 찾기 http://api.jquery.com/find/을 . http://jsfiddle.net/lalitjs/Nx8a6/ 예제 참조

Lalit Kumar Maurya

jQuery에서 자식을 참조하는 방법. 다음 jQuery로 요약했습니다.

 $(this).find("img"); // any img tag child or grandchild etc... $(this).children("img"); //any img tag child that is direct descendant $(this).find("img:first") //any img tag first child or first grandchild etc... $(this).children("img:first") //the first img tag child that is direct descendant $(this).children("img:nth-child(1)") //the img is first direct descendant child $(this).next(); //the img is first direct descendant child

Oskar

DIV의 ID를 알지 못하면 다음과 같이 IMG를 선택할 수 있다고 생각합니다.

 $("#"+$(this).attr("id")+" img:first")

Adam

다음 코드를 시도해 보세요.

 $(this).children()[0]

Maxam

다음 방법 중 하나를 사용할 수 있습니다.

1 찾기():

 $(this).find('img');

2명의 어린이():

 $(this).children('img');

Mike Clark

jQuery의 each 은 하나의 옵션입니다.

 <div id="test"> <img src="testing.png"/> <img src="testing1.png"/> </div> $('#test img').each(function(){ console.log($(this).attr('src')); });

Thirumalai murugan

하위 선택기 를 사용하여 상위 내에서 사용 가능한 하위 요소를 참조할 수 있습니다.

 $(' > img', this).attr("src");

$(this) 대한 참조가 없고 다른 함수 div 내에서 사용 가능한 img 를 참조하려는 경우입니다.

 $('#divid > img').attr("src");

Dennis R

또한 다음과 같이 작동해야 합니다.

 $("#id img")

tetutato

다음은 기능 코드입니다. 실행할 수 있습니다(간단한 데모임).

DIV를 클릭하면 몇 가지 다른 방법에서 이미지를 가져옵니다. 이 상황에서 "this"는 DIV입니다.

 $(document).ready(function() { // When you click the DIV, you take it with "this" $('#my_div').click(function() { console.info('Initializing the tests..'); console.log('Method #1: '+$(this).children('img')); console.log('Method #2: '+$(this).find('img')); // Here, i'm selecting the first ocorrence of <IMG> console.log('Method #3: '+$(this).find('img:eq(0)')); }); });

 .the_div{ background-color: yellow; width: 100%; height: 200px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="my_div" class="the_div"> <img src="..."> </div>

도움이 되기를 바랍니다!

RPichioli

<div> 내부에 <img> 태그가 있을 수 있습니다.

요소를 찾으려면 .find() .

코드를 안전하게 유지하려면 .each() .

.find() 및 .each() <img> 요소의 경우 null 참조 오류를 방지 <img> 요소를 처리할 수 있습니다.

 // Set the click handler on your div $("body").off("click", "#mydiv").on("click", "#mydiv", function() { // Find the image using.find() and .each() $(this).find("img").each(function() { var img = this; // "this" is, now, scoped to the image element // Do something with the image $(this).animate({ width: ($(this).width() > 100 ? 100 : $(this).width() + 100) + "px" }, 500); }); });

 #mydiv { text-align: center; vertical-align: middle; background-color: #000000; cursor: pointer; padding: 50px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="mydiv"> <img src="" width="100" height="100"/> </div>

Jason Williams

 $(document).ready(function() { // When you click the DIV, you take it with "this" $('#my_div').click(function() { console.info('Initializing the tests..'); console.log('Method #1: '+$(this).children('img')); console.log('Method #2: '+$(this).find('img')); // Here, i'm selecting the first ocorrence of <IMG> console.log('Method #3: '+$(this).find('img:eq(0)')); }); });

 .the_div{ background-color: yellow; width: 100%; height: 200px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="my_div" class="the_div"> <img src="..."> </div>

Sumit Lahiri

img가 div 내부의 첫 번째 요소인 경우 시도하십시오.

 $(this.firstChild); 

 $( "#box" ).click( function() { let img = $(this.firstChild); console.log({img}); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="box"><img src="https://picsum.photos/seed/picsum/300/150"></div>

Kamil Kiełczewski

네이티브 자바 스크립트를 사용하면 다음을 사용할 수 있습니다.

이미지 태그가 두 개 이상인 경우 다음을 사용하십시오.

this.querySelectorAll("img")

이미지 태그가 하나만 있으면 우리

this.querySelector("img")

Vishnu Prasanth G

당신은 사용할 수 있습니다

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> $(this).find('img'); </script>

Hassan Fayyaz

출처 : http:www.stackoverflow.com/questions/306583/how-to-get-the-children-of-the-this-selector