Как получить детей из селектора $ (this)?

У меня есть макет, подобный этому:

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

и хотел бы использовать селектор jQuery для выбора дочернего img внутри div нажатий.

Чтобы получить div , у меня есть этот селектор:

 $(this)
 

Как я могу получить ребенка img с помощью селектора?

вопрос задан 20.11.2008
Alex
12160 репутация

16 ответов


  • 2703 рейтинг

    Конструктор jQuery принимает второй параметр с именем context который может использоваться для переопределения контекста выделения.

     jQuery("img", this);
     

    Это то же самое, что использовать .find() следующим образом:

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

    Если желаемые imgs являются только прямыми потомками щелкнутого элемента, вы также можете использовать .children() :

     jQuery(this).children("img");
     
    ответ дан Simon, с репутацией 34140, 20.11.2008
  • 446 рейтинг

    Вы также можете использовать

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

    который будет возвращать все img с, которые являются потомками div

    ответ дан philnash, с репутацией 35000, 20.11.2008
  • 127 рейтинг

    Если вам нужно получить первое img которое осталось ровно на одном уровне, вы можете сделать

     $(this).children("img:first")
     
    ответ дан rakslice, с репутацией 5587, 21.07.2011
  • 70 рейтинг

    Если вашему тегу DIV сразу следует тег IMG, вы также можете использовать:

     $(this).next();
     
    ответ дан Roccivic, с репутацией 808, 21.06.2011
  • 56 рейтинг

    Прямые дети

     $('> .child', this)
     
    ответ дан Rayron Victor, с репутацией 1763, 16.07.2012
  • 37 рейтинг

    Вы можете найти все элементы img родительского div, как показано ниже.

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

    Ваш div содержит только один элемент 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>
     

    то вы не можете использовать верхний код, чтобы найти значение alt второго элемента 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")
     

    Вы можете использовать find или children, как указано выше. Для получения дополнительной информации посетите http://api.jquery.com/children/ и найдите http://api.jquery.com/find/ . См. Пример http://jsfiddle.net/lalitjs/Nx8a6/

    ответ дан Lalit Kumar, с репутацией 3847, 22.03.2013
  • 29 рейтинг

    Способы обращения к ребенку в 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, с репутацией 1835, 25.01.2015
  • 29 рейтинг

    Не зная идентификатора DIV, я думаю, что вы можете выбрать IMG следующим образом:

     $("#"+$(this).attr("id")+" img:first")
     
    ответ дан Adam, с репутацией 369, 20.11.2008
  • 27 рейтинг

    Попробуйте этот код:

     $(this).children()[0]
     
    ответ дан Maxam, с репутацией 3502, 20.11.2008
  • 19 рейтинг

    Вы можете использовать один из следующих способов:

    1 find ():

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

    2 детей ():

     $(this).children('img');
     
    ответ дан Mike Clark, с репутацией 1413, 14.08.2015
  • 17 рейтинг

    jQuery's each - это один из вариантов:

     <div id="test">
        <img src="testing.png"/>
        <img src="testing1.png"/>
    </div>
    
    $('#test img').each(function(){
        console.log($(this).attr('src'));
    });
     
    ответ дан Thirumalai murugan, с репутацией 3382, 26.06.2013
  • 12 рейтинг

    Вы можете использовать Child Selecor для ссылки на дочерние элементы, доступные в родительском элементе .

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

    И ниже, если у вас нет ссылки на $(this) и вы хотите ссылаться на img доступных в пределах div от другой функции.

      $('#divid > img').attr("src");
     
    ответ дан Dennis R, с репутацией 2568, 25.07.2014
  • 9 рейтинг

    Также это должно работать:

     $("#id img")
     
    ответ дан tetutato, с репутацией 373, 21.06.2015
  • 4 рейтинг

    Вот функциональный код, вы можете запустить его (это простая демонстрация).

    Когда вы нажимаете DIV, вы получаете изображение из разных методов, в этой ситуации «это» - это 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, с репутацией 2213, 28.12.2016
  • 4 рейтинг

    У вас может быть 0 до многих <img> тегов внутри вашего <div> .

    Чтобы найти элемент, используйте .find() .

    Чтобы ваш код был безопасным, используйте .each() .

    Использование .find() и .each() вместе предотвращает пустые опорные ошибки в случае 0 <img> элементов, а также позволяет обрабатывать несколько <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;
      
    } 
     <div> 

    ответ дан Jason Williams, с репутацией 2519, 23.08.2017
  • 1 рейтинг

     $(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, с репутацией 160, 5.03.2017