Làm thế nào để có được con của bộ chọn $ (this)?

Tôi có một bố cục tương tự như thế này:

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

và muốn sử dụng bộ chọn jQuery để chọn con imgbên trong divnhấp chuột.

Để có được div, tôi đã có bộ chọn này:

$(this)

Làm thế nào tôi có thể có được đứa trẻ imgbằng cách sử dụng một bộ chọn?

Hàm tạo jQuery chấp nhận một tham số thứ 2 được gọi là tham số contextcó thể được sử dụng để ghi đè ngữ cảnh của vùng chọn.

jQuery("img", this);

Điều này giống như sử dụng .find()như thế này:

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

Nếu hình ảnh bạn mong muốn chỉ là hậu duệ trực tiếp của phần tử được nhấp, bạn cũng có thể sử dụng .children():

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

Bạn cũng có thể sử dụng

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

sẽ trả lại tất cả những imggì là hậu duệ củadiv

Nếu bạn cần imggiảm thứ nhất xuống một cấp, bạn có thể làm

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

Nếu thẻ DIV của bạn ngay lập tức được theo sau bởi thẻ IMG, bạn cũng có thể sử dụng:

$(this).next();

Những đứa trẻ trực tiếp là

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

Bạn có thể tìm thấy tất cả phần tử img của div cha như bên dưới

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

Nếu bạn muốn phần tử img cụ thể, bạn có thể viết như thế này

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

Div của bạn chỉ chứa một phần tử img. Vì vậy, cho điều này dưới đây là đúng

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

Nhưng nếu div của bạn chứa nhiều phần tử img như bên dưới

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

sau đó bạn không thể sử dụng mã trên để tìm giá trị alt của phần tử img thứ hai. Vì vậy, bạn có thể thử điều này:

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

Ví dụ này cho thấy một ý tưởng chung rằng làm thế nào bạn có thể tìm thấy đối tượng thực tế trong đối tượng cha. Bạn có thể sử dụng các lớp để phân biệt đối tượng con của bạn. Điều đó thật dễ dàng và thú vị. I E

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

Bạn có thể làm điều này như dưới đây:

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

và cụ thể hơn như:

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

Bạn có thể sử dụng find hoặc trẻ em như mã trên. Để biết thêm, hãy truy cập Trẻ em http://api.jquery.com/children/ và Tìm http://api.jquery.com/find/ . Xem ví dụ http://jsfiddle.net/lalitjs/Nx8a6/

Các cách để chỉ một đứa trẻ trong jQuery. Tôi đã tóm tắt nó trong jQuery sau:

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

Nếu không biết ID của DIV, tôi nghĩ bạn có thể chọn IMG như thế này:

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

Hãy thử mã này:

$(this).children()[0]

Bạn có thể sử dụng một trong các phương pháp sau:

1 tìm ():

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

2 trẻ em():

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

jQuery eachlà một tùy chọn:

<div id="test">
    <img src="testing.png"/>
    <img src="testing1.png"/>
</div>

$('#test img').each(function(){
    console.log($(this).attr('src'));
});

Bạn có thể sử dụng Child Selecor để tham chiếu các phần tử con có sẵn trong phần cha mẹ.

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

Và dưới đây là nếu bạn không có tài liệu tham khảo $(this)và bạn muốn tham khảo imgcó sẵn trong một divchức năng khác.

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

Ngoài ra điều này sẽ làm việc:

$("#id img")

Đây là một mã chức năng, bạn có thể chạy nó (đó là một minh chứng đơn giản).

Khi bạn nhấp vào DIV, bạn nhận được hình ảnh từ một số phương pháp khác nhau, trong tình huống này "đây" là 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>

Hy vọng nó giúp!

Bạn có thể có 0 đến nhiều <img>thẻ bên trong của bạn <div>.

Để tìm một phần tử, sử dụng một .find() .

Để giữ mã của bạn an toàn, hãy sử dụng a .each().

Sử dụng .find()và .each()cùng nhau ngăn ngừa lỗi tham chiếu null trong trường hợp 0 <img>phần tử đồng thời cho phép xử lý nhiều <img>phần tử.

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

Bạn đã có thể sử dụng

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

Nếu img của bạn chính xác là phần tử đầu tiên bên trong div thì hãy thử

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