【jQuery】 要素の幅サイズをすべて取得したい (n個のdiv imgの横幅が取得出来ない)

Question

<script type="text/javascript">
$(window).load(function(){
    var cont = jQuery('#contents');
    var contW = jQuery('.section-horizontal img').outerWidth(true) * jQuery('div a img',cont).length + 640 ; /*  640pxはtext分を足した数 */
    cont.css('width', contW);  
    var speed = 500;
    jQuery('html').mousewheel(function(event, mov) {
        //ie firefox
        jQuery(this).scrollLeft(jQuery(this).scrollLeft() - mov * speed);
        //webkit
        jQuery('body').scrollLeft(jQuery('body').scrollLeft() - mov * speed);
        return false;   //縦スクロール不可
    });
});
</script>

上記のコードですと、先頭の.section-horizontal imgの横幅を元にした.section-horizontal imgのn個の合計が
#contentsのwidth横幅になってしまいます。

実現したいことは、.section-horizontal imgの横幅は画像サイズによって異なるため、各横幅サイズの合計を取得したいのですが、解決方法を教えていただけますしょうか。

<div id="contents">
<?php if( get_field('img01') ): ?>
<div id="s01" class="section-horizontal">
<a href="#s02"><img src="<?php the_field('img01'); ?>"></a>
</div>
<?php endif; ?>

<?php if( get_field('img02') ): ?>
<div id="s02" class="section-horizontal">
<a href="#s03"><img src="<?php the_field('img02'); ?>"></a>
</div>
<?php endif; ?>
.
.

アドバンスカスタムフィールドで画像をページ投稿表示しております。

よろしくお願いします。

Answer 1

jQuery('.section-horizontal img').outerWidth(true)の部分を以下のように各画像幅の合計(sum)にしてはいかがですか。

// var contW = jQuery('.section-horizontal img').outerWidth(true) * jQuery('div a img', cont).length + 640;
var sum = 0;
var contImgs = jQuery('div a img', cont);
for(var i = 0; i < contImgs.length; i++) sum += contImgs.eq(i).outerWidth(true);
var contW = sum * contImgs.length + 640;

Comments

[退会済みユーザー]

ご回答いただきありがとうございます。

上記ソースを試しましたが、contentsの横幅がさらに広くなってしまいました。
下記の記載でよろしかったでしょうか。
お手数ですが、ご教授いただけますと幸いです。

<script type="text/javascript">
$(window).load(function(){
var cont = jQuery('#contents');
var sum = 0;
var contImgs = jQuery('div a img', cont);
for(var i = 0; i < contImgs.length; i++) sum += contImgs.eq(i).outerWidth(true);
var contW = sum * contImgs.length + 640;
cont.css('width', contW);
//スクロールスピード
var speed = 500;
//マウスホイールで横移動
jQuery('html').mousewheel(function(event, mov) {
//ie firefox
jQuery(this).scrollLeft(jQuery(this).scrollLeft() - mov * speed);
//webkit
jQuery('body').scrollLeft(jQuery('body').scrollLeft() - mov * speed);
return false; //縦スクロール不可
});
});
</script>

[退会済みユーザー]

そうですね。
「var contW = 〜」の部分を上記コードで置き換えていれば問題ありません。

では、「var contImgs = jQuery('div a img', cont);」の部分を「var contImgs = jQuery('.section-horizontal img', cont);」としてみてはどうですか。

HTMLが部分的にしか示されていないため、推測での回答になりますが。

[退会済みユーザー]

上記の「var contImgs = jQuery('.section-horizontal img', cont);」も試させていただきましたが、やはり最初の試したときと同じでさらに広くなってしまいました。

以下も試してみましたが、こちらもダメでした。。。
「var contImgs = jQuery('.section-horizontal a img', cont);」

現在、構築中のサイトなのですが、リンクをのせさせていただきましたので
一度、ソースを見てご教授いただけませんでしょうか。

[退会済みユーザー]

すみません、寝ぼけた回答をしていました。
はじめのコードの「var contW = sum * contImgs.length + 640;」を「var contW = sum + 640;」と変更してみてください。

[退会済みユーザー]

度々、ありがとうございます。

ご教授頂きましたコードで各画像の横幅と+640の取得がされ、全体のコンテンツ横幅が正しく取得出来ました。

朝早くからご教授いただきまして本当に感謝の気持ちで一杯です。
誠にありがとうございます。