복붙노트

[JQUERY] 어떻게 $ (이) 선택의 자식을 얻으려면?

JQUERY

어떻게 $ (이) 선택의 자식을 얻으려면?

해결법


  1. 1.JQuery와 생성자는 선택의 맥락을 무시하는 데 사용할 수있는 컨텍스트라는 2 매개 변수를 받아들입니다.

    JQuery와 생성자는 선택의 맥락을 무시하는 데 사용할 수있는 컨텍스트라는 2 매개 변수를 받아들입니다.

    jQuery("img", this);
    

    어떤이 같은 .find ()를 사용하는 것과 같습니다 :

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

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

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

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

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

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

    사업부의 후손 인 모든 imgs을 반환하는


  3. 3.정확히 한 수준 아래의 첫 번째 IMG를 얻을 필요가있는 경우, 당신은 할 수있다

    정확히 한 수준 아래의 첫 번째 IMG를 얻을 필요가있는 경우, 당신은 할 수있다

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

  4. 4.당신의 DIV 태그가 바로 IMG 태그 뒤에있는 경우, 당신은 또한 사용할 수 있습니다 :

    당신의 DIV 태그가 바로 IMG 태그 뒤에있는 경우, 당신은 또한 사용할 수 있습니다 :

    $(this).next();
    

  5. 5.직접 아이들은

    직접 아이들은

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

  6. 6.아래 같은 부모 DIV의 모든 IMG 요소를 찾을 수 있습니다

    아래 같은 부모 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")
    

    하지만 당신의 사업부는 다음과 같은 더 IMG 요소를 포함하는 경우

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

    당신은 두 번째 IMG 요소의 고도 값을 찾기 위해 위의 코드를 사용할 수 없습니다. 그래서 당신이 시도 할 수 있습니다 :

     $(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")
    

    당신은 위의 코드로 찾기 또는 자녀를 사용할 수 있습니다. 더 방문을 위해 아이들과 http://api.jquery.com/find/ 찾기 http://api.jquery.com/children/. 참조 예 http://jsfiddle.net/lalitjs/Nx8a6/


  7. 7.방법은 jQuery를에 아이를 참조하십시오. 나는 다음과 같은 jQuery를에 요약 :

    방법은 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
    

  8. 8.나는이 같은 IMG를 선택할 수있다 생각 DIV의 ID를 모른 채 :

    나는이 같은 IMG를 선택할 수있다 생각 DIV의 ID를 모른 채 :

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

  9. 9.이 코드를보십시오 :

    이 코드를보십시오 :

    $(this).children()[0]
    

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

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

    1 개 찾기 () :

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

    어린이 2 명 () :

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

  11. 11.jQuery를 각각 하나 개의 옵션이다 :

    jQuery를 각각 하나 개의 옵션이다 :

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

  12. 12.당신은 부모 내에서 사용 가능한 자식 요소를 참조하는 아이 선택기를 사용할 수 있습니다.

    당신은 부모 내에서 사용 가능한 자식 요소를 참조하는 아이 선택기를 사용할 수 있습니다.

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

    당신이 $ (이) 참조가없는 다른 기능에서 사업부에서 사용할 수를 IMG 참조 할 경우 아래입니다.

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

  13. 13.또한이 작동합니다 :

    또한이 작동합니다 :

    $("#id img")
    

  14. 14.여기에 기능 코드는, 당신은 (그것을 간단한 데모입니다)를 실행할 수 있습니다.

    여기에 기능 코드는, 당신은 (그것을 간단한 데모입니다)를 실행할 수 있습니다.

    당신이이 상황에서, 몇 가지 다른 방법에서 이미지를 얻을 DIV를 클릭하면 "이"는 DIV이다.

    $ (문서) .ready (함수 () { 당신은 DIV를 클릭하면 // 당신은 "이"로 가져 $ ( '#의 my_div'). ((기능을 클릭) { console.info ( '테스트를 초기화 ..'); 을 console.log ( '방법 # 1 :'+ $ (이) .children ( 'IMG')); 을 console.log ( '방법 # 2 :'+ $ (이) .find ( 'IMG')); // 여기서, I는 의 첫 번째를 선택 ocorrence있어 을 console.log ( '방법 # 3 :'+ $ (이) .find ( 'IMG : EQ (0)')); }); }); .the_div { 배경 색 : 노란색; 폭 : 100 %; 높이 : 200 픽셀; } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

    희망이 도움이!


  15. 15.당신은 많은 태그 내부의
    0을 가질 수있다.

    당신은 많은 태그 내부의

    0을 가질 수있다.

    요소를 찾으려면 .find ()를 사용합니다.

    코드의 안전을 유지하기 위해, .each ()를 사용합니다.

    또한, 복수의 요소를 처리하기 위해 허용하면서 사용 .find () 및 .each ()가 함께 0 요소의 경우 null 참조 오류를 방지한다.

    // 설정하여 사업부의 클릭 핸들러 $ ( "몸"). 오프, 기능을 "#mydiv을". ( "#mydiv"를 "클릭")에 ( "클릭"() { // 이미지 using.find ()와 .each 찾기 $ (이) .find ( "IMG"). 각 (함수 () { var에 IMG이 =; // "이"가, 지금, 이미지 요소에 속합니다 이미지와 // 어떻게 좀 $ (이) .animate ({ 폭 : ($ (이) .width ()> 100 100 : $ (이) .width () + 100) + "픽셀" }, 500); }); }); #mydiv { 텍스트 정렬 : 센터; 수직 정렬 : 중간; 배경 색상 : # 000000; 커서 : 포인터; 패딩 : 50 픽셀; } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">


  16. 16.$ (문서) .ready (함수 () { 당신은 DIV를 클릭하면 // 당신은 "이"로 가져 $ ( '#의 my_div'). ((기능을 클릭) { console.info ( '테스트를 초기화 ..'); 을 console.log ( '방법 # 1 :'+ $ (이) .children ( 'IMG')); 을 console.log ( '방법 # 2 :'+ $ (이) .find ( 'IMG')); // 여기서, I는 의 첫 번째를 선택 ocorrence있어 을 console.log ( '방법 # 3 :'+ $ (이) .find ( 'IMG : EQ (0)')); }); }); .the_div { 배경 색 : 노란색; 폭 : 100 %; 높이 : 200 픽셀; } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

    $ (문서) .ready (함수 () { 당신은 DIV를 클릭하면 // 당신은 "이"로 가져 $ ( '#의 my_div'). ((기능을 클릭) { console.info ( '테스트를 초기화 ..'); 을 console.log ( '방법 # 1 :'+ $ (이) .children ( 'IMG')); 을 console.log ( '방법 # 2 :'+ $ (이) .find ( 'IMG')); // 여기서, I는 의 첫 번째를 선택 ocorrence있어 을 console.log ( '방법 # 3 :'+ $ (이) .find ( 'IMG : EQ (0)')); }); }); .the_div { 배경 색 : 노란색; 폭 : 100 %; 높이 : 200 픽셀; } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">


  17. 17.당신은 사용할 수 있습니다

    당신은 사용할 수 있습니다

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

  18. 18.당신의 IMG는 사업부 내부 정확히 첫 번째 요소 인 경우, 시도

    당신의 IMG는 사업부 내부 정확히 첫 번째 요소 인 경우, 시도

    $(this.firstChild);
    

    $ ( "#box") .click (함수 () { 하자 IMG = $ (this.firstChild는); CONSOLE.LOG (IMG {}); }) <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">

  19. from https://stackoverflow.com/questions/306583/how-to-get-the-children-of-the-this-selector by cc-by-sa and MIT license