Question

我有两个文件夹中的图像。一个在tne命名文件夹中，另一个在two命名文件夹中。

/images/one/one.jpg
/images/one/two.jpg
/images/one/any.jpg
and more....


/images/two/any.jpg
/images/two/what.jpg
/images/two/ever.jpg
/images/two/images.jpg
and more....

图像在这样的一个div中......

<div id="test">
<img src="/images/one/...." />
<img src="/images/one/...." />
<img src="/images/two/...." />
<img src="/images/two/...." />
</div>

问题：

现在我想知道名为one的第一个文件夹的总图像宽度以及名为two的第二个文件夹的总图像宽度

是否可以使用jquery？

Answer 1

这应该适合你：

jsFiddle

    $(document).ready(function(){
    var dirs = ['sports','cats'];
    var widths = [0,0]; //Index 0 is width of images in folder 1 and index 1 is width of images in folder 2
    for(var i=0;i<dirs.length;i++) {
        $('img').filter(function(){
            if($(this).attr('src').indexOf(dirs[i])>=0)
            {
                widths[i] = widths[i]+$(this).width();
            }
        });
    }
    alert('Total width 1: '+widths[0]+', total width 2: '+widths[1]);
});

它更先进一点，但是只需在前两个数组中插入更多元素，就可以在没有太多麻烦的情况下进行扩展。

修改忘记提及“体育”和“猫”当然只是示例文件夹。在您的情况下，您需要放置'image / one'和'image / two'。这也使用了很少的jQuery，因为在这种情况下它并不是必需的。

Answer 2

试试这个：

var totalImagesFolderOne = 0;

$("div#test > img[src*='/images/one/']").each(function(){
  totalImagesFolderOne += $(this).width();
});

alert("Total width images in folder `one`: " + totalImagesFolderOne);

这是 jsFiddle

Answer 3

您可以在jquery中使用wrapAll()函数：

var allWidth = $('#test img').wrapAll('<span>').parent().width();
var oneWidth = $imgOne.wrapAll('<span>').parent().width();
var $imgOne = $("div#test img[src*='/images/one/']");
$('#test img').unwrap();
$imgOne.unwrap();

console.log(oneWidth) //one images width
console.log(allWidth - oneWidth) //two images width.

知道特定文件夹的总图像的宽度

3 个答案: