0

我对 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>

我希望我没有做傻事。

4

4 回答 4

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)


    });

演示

于 2012-12-07T09:37:57.103 回答
0 
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);    });
});
于 2012-12-07T09:36:03.890 回答
0

如果您在 div 标签（该特定类的）中查找 img ，请使用 find （在孩子中查找）而不是 next （在兄弟姐妹中查找）。

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()));
于 2012-12-07T09:39:39.050 回答
0

你得到的原因'null'是因为你'img'的孩子'this'需要做$(this).children("img").width();

于 2012-12-07T09:40:14.277 回答