CODEWITHSUNDEEP
jquery
Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

knowing the width of total images of specific folder

I have images in two folders. One is in tne named folder and another is in two named folder.

/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....

And the images are in one div like this....

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

Question:

Now I would like to know the width of total images of first folder named one and the width of total images of second folder named two

Is it possible with jquery?

Upvotes: 1

Views: 96

Answers (3)

Tomzan
Tomzan

Reputation: 2818

You can use wrapAll() function in jquery:

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.

Upvotes: 0

David Alexander Bjerremose
David Alexander Bjerremose

Reputation: 11

This should do the trick for you:

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]);
});

It's a little more advanced, but with the capability to be extended upon without much ado, simply by inserting more elements into the first two arrays.

EDIT Forgot to mention that 'sports' and 'cats' are of course only example folders. In your case, you would need to put 'image/one' and 'image/two'. This also use very little jQuery, as it's not really a necessity in this situation.

Upvotes: 1

Mathijs Flietstra
Mathijs Flietstra

Reputation: 12974

Try this:

var totalImagesFolderOne = 0;

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

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

Here's a jsFiddle

Upvotes: 0

Related Questions