如何获得$（this）select器的孩子？
我有一个类似于这样的布局：
<div id="..."><img src="..."></div> 并希望使用jQueryselect器来selectdiv内的子img点击。
为了得到div ，我有这个select器：
$(this)
我怎样才能让孩子使用select器img ？
jQuery构造函数接受一个名为context的第二个参数，它可以用来覆盖select的上下文。
jQuery("img", this);
这和使用.find()一样的：
jQuery(this).find("img");
如果你想要的imgs 只是被点击元素的直接后代，你也可以使用.children() ：
jQuery(this).children("img");
你也可以使用
$(this).find('img');
这将返回所有img s是div后代
如果你需要把第一个img精确到一个级别，你可以这样做
$(this).children("img:first")
如果您的DIV标签紧跟着IMG标签，您也可以使用：
$(this).next();
直接的孩子是
$('> .child', this)
你可以像下面一样find父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
你的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>
那么你不能用上面的代码来查找第二个img元素的alt值。 所以你可以试试这个：
$(this).find("img:last-child").attr("alt") OR $(this).children("img:last-child").attr("alt")
这个例子显示了一个大概的想法，即如何在父对象中find实际的对象。 您可以使用类来区分您的子对象。 这很容易和有趣。 即
<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/children/和查找http://api.jquery.com/find/ 。 看例子http://jsfiddle.net/lalitjs/Nx8a6/
不知道DIV的ID，我想你可以select像这样的IMG：
$("#"+$(this).attr("id")+" img:first")
试试这个代码：
$(this).children()[0]
在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
您可以使用以下任一方法：
1 find（）：
$(this).find('img');
2名儿童（）：
$(this).children('img');
jQuery的each是一个选项：
<div id="test"> <img src="testing.png"/> <img src="testing1.png"/> </div> $('#test img').each(function(){ console.log($(this).attr('src')); });
您可以使用子select器来引用父代中可用的子元素。
$(' > img', this).attr("src");
下面是如果你没有参考$(this) ，你想引用img可用在一个div从其他function。
$('#divid > img').attr("src");
另外这应该工作：
$("#id img")
$(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>
您的<div>可能有0到多个<img>标签。
要find一个元素，请使用.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; }
<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>
这是一个function性的代码，你可以运行它（这是一个简单的演示）。
当你点击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>
