Câu hỏi Làm thế nào để có được con của bộ chọn $ (this) này?


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 img bên trong div trong một cái nhấ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ẻ img sử dụng bộ chọn?


2046
2017-11-20 19:44


gốc




Các câu trả lời:


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

jQuery("img", this);

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

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

Nếu imgs bạn mong muốn là chỉ có con cháu 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");

2690
2017-11-20 21:27



cho những gì nó có giá trị: jQuery ("img", điều này) được chuyển đổi nội bộ thành: jQuery (this) .find ("img") Vì vậy, thứ hai là bao giờ nên nhanh hơn một chút. :) - Paul Irish
Cảm ơn @Paul, tôi đã lo lắng rằng việc sử dụng find () là sai rồi, hóa ra đó là cách duy nhất;) - Agos
Nếu nút là một đứa trẻ trực tiếp, nó sẽ không được nhanh nhất để chỉ làm $ (this) .children ('img'); ? - adamyonk
@adamyonk infact không, ít nhất không nếu điều này là bất cứ điều gì để đi theo: jsperf.com/jquery-children-vs-find/3 - Simon Stender Boisen
Tôi thấy hoàn toàn trái ngược với những gì @PaulIrish đã nêu trong ví dụ này - jsperf.com/jquery-selectors-comparison-a   . Có ai có thể làm sáng tỏ không? Hoặc tôi đã nhận được trường hợp thử nghiệm sai, hoặc jquery thay đổi tối ưu hóa này trong 4 năm qua. - Jonathan Vanasco


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

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

sẽ trả về tất cả imgs là hậu duệ của div


445
2017-11-20 21:23



Trong trường hợp chung, có vẻ như $(this).children('img') sẽ tốt hơn. ví dụ. <div><img src="..." /><div><img src="..." /></div></div> bởi vì có lẽ người dùng muốn tìm các imgs cấp 1. - Buttle Butkus


Nếu bạn cần để có được đầu tiên img đó là chính xác một cấp độ, bạn có thể làm

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

127
2017-07-21 18:47



Làm :first chỉ phù hợp "xuống chính xác một cấp", hoặc nó có khớp không các "Đầu tiên"  img đã được tìm thấy? - Ian Boyd
@IanBoyd, .children() là nơi "xuống chính xác một cấp" xuất phát từ và :first là nơi "đầu tiên" xuất phát từ. - Tyler Crompton
@IanBoyd, yếu tố đó sẽ bị mất tích. Nó sẽ chỉ áp dụng nếu bạn sử dụng .find() thay vì .children() - Tyler Crompton
nếu bạn đang sử dụng: đầu tiên với một .find () cẩn thận, jQuery dường như tìm tất cả các hậu duệ và sau đó trả về phần tử đầu tiên, đôi khi rất tốn kém - Clarence Liu
@ButtleButkus Trong câu hỏi, this đã là một tham chiếu đến <div> có chứa <img>Tuy nhiên, nếu bạn có nhiều cấp độ thẻ để đi qua từ tham chiếu bạn đã có thì bạn chắc chắn có thể soạn nhiều hơn một children() gọi điện - rakslice


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

$(this).next();

70
2018-06-21 13:25



.next () thực sự mong manh, trừ khi bạn luôn có thể đảm bảo yếu tố sẽ là yếu tố tiếp theo, tốt hơn là sử dụng một phương pháp khác. Trong trường hợp này, IMG là hậu duệ, không phải là anh chị em của div. - LocalPCGuy
OP đã yêu cầu một đứa trẻ img bên trong div. - Giorgio Tempesta


Các thẳng thắn trẻ em là

$('> .child', this)

56
2017-07-16 20:07



Câu trả lời này có khả năng gây hiểu nhầm vì không có yếu tố nào có lớp 'con' nên nó sẽ không hoạt động. - Giorgio Tempesta


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

$(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ư dưới đây

<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 mẹ. 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 như sau:

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

và cụ thể hơn là:

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

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


37
2018-03-22 08:05





Không biết ID của DIV, tôi nghĩ bạn có thể chọn IMG như sau:

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

29
2017-11-20 19:56



điều này có thể thực sự hoạt động nhưng đó là câu trả lời của Rube Goldberg :) - Scott Evernden
và nếu bạn định sử dụng mã đó, ít nhất phải làm: $ ("#" + this.id + "img: first") - LocalPCGuy
@LocalPCGuy Bạn có nghĩa là: "và nếu bạn định sử dụng mã đó gọi giúp đỡ" - gdoron
Tại sao bạn sẽ làm điều này nếu 'this' đã chọn div thực tế? Bên cạnh đó, nếu div không có id thì mã này sẽ không hoạt động. - Giorgio Tempesta


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

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

28
2018-01-25 10:51





Hãy thử mã này:

$(this).children()[0]

27
2017-11-20 19:51



mà sẽ làm việc mặc dù nó trả về một phần tử dom không phải là một đối tượng jq - redsquare
Tôi không biết nếu đó là cách tiếp cận tốt nhất cho tình hình hiện tại, nhưng nếu bạn muốn đi tuyến đường này và vẫn kết thúc với một đối tượng jQuery, chỉ cần quấn nó theo cách đó: $($(this).children()[0]). - patridge
hoặc thậm chí dễ dàng hơn $(this:first-child) - rémy
thay vì $($(this).children()[x]) sử dụng $(this).eq(x) hoặc nếu bạn muốn cái đầu tiên, chỉ $(this).first(). - Cristi Mihai
@ rémy: Đó không phải là cú pháp hợp lệ. (Mất tất cả 2 năm để mọi người chú ý ...) - BoltClock♦


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');

19
2017-08-14 11:29