How to get the children of the $(this) selector?

前端 未结 18 2186
日久生厌
日久生厌 2020-11-22 05:10

I have a layout similar to this:

and would like to use a jQuery selector to selec

相关标签:
18条回答
  • 2020-11-22 05:23

    You could also use

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

    which would return all imgs that are descendants of the div

    0 讨论(0)
  • 2020-11-22 05:23

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

    0 讨论(0)
  • 2020-11-22 05:27

    If you need to get the first img that's down exactly one level, you can do

    $(this).children("img:first")
    
    0 讨论(0)
  • 2020-11-22 05:28

    The jQuery constructor accepts a 2nd parameter called context which can be used to override the context of the selection.

    jQuery("img", this);
    

    Which is the same as using .find() like this:

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

    If the imgs you desire are only direct descendants of the clicked element, you can also use .children():

    jQuery(this).children("img");
    
    0 讨论(0)
  • 2020-11-22 05:29

    If your DIV tag is immediately followed by the IMG tag, you can also use:

    $(this).next();
    
    0 讨论(0)
  • 2020-11-22 05:30

    You may have 0 to many <img> tags inside of your <div>.

    To find an element, use a .find().

    To keep your code safe, use a .each().

    Using .find() and .each() together prevents null reference errors in the case of 0 <img> elements while also allowing for handling of multiple <img> elements.

    // 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>

    0 讨论(0)
提交回复
热议问题