Question

我对JQuery的背景并不多，所以让一件简单的事情变得有点困难。

我的HTML元素为：

<div id="content">
    <div class="box mosaic-block bar">
        <img src="images/products-mansonary/img1.jpg" />
        <div class="overlay_brand"></div>
    </div>
    <div class="box">
        <img src="images/products-mansonary/img2.jpg" />
    </div>
    <div class="box">
        <img src="images/products-mansonary/img3.jpg" />
    </div>
</div>

我想用id内容循环这个div，并获得图像的高度和宽度：

  $(document).ready(function() {
    $('#content').children('.box').each(function() {
        console.log($(this).html());
        var img_height = $(this).next("img").height();
        var img_width = $(this).next("img").width();
        //console.log($(this).children().width());
        //console.log(img_height + "    " + img_width)
        console.log($($(this).next('img').html()));
        return false;
    });

    //$(".overlay_brand")
});

暂时，我返回false只运行一次循环。

当我说console.log($(this).html())时，我得到了：

<img src="http://localhost:5643/Template/images/products-mansonary/img1.jpg"><div class="overlay_brand"></div>

我希望我不是在做傻事。

Answer 1

尝试使用find（）而不是next（）

$('#content').children('.box').each(function() {
       console.log($(this).html());
       var img_height = $(this).find("img").height();
       var img_width = $(this).find("img").width();

       alert(img_height + "    " + img_width)


    });

Demo

Answer 2

Remove the return false from the function

$(document).ready(function() {
$('#content').children('.box').each(function() {
    var img_height = $(this).find("img").height();
    var img_width = $(this).find("img").width();
    console.log("Image height "+img_height + " image width= " + img_width);    });
});

Answer 3

如果你在你的div标签（特定类）中寻找img，请使用find（查看子项内）而不是下一项（查看兄弟姐妹）。

var img_height = $(this).find("img").height();
var img_width = $(this).find("img").width();
//console.log($(this).children().width());
//console.log(img_height + "    " + img_width)
console.log($($(this).find('img').html()));

Answer 4

您获得'null'的原因是因为'img'是'this'的孩子，您需要$(this).children("img").width();

JQuery获取下一个图像元素的宽度和高度

4 个答案: