- 締切済み
jquery 要素数に応じたwidthの取得方法
ご質問です。 下記の様なソースで、リストの数がページにより変わります。 <div class="wrap" style="width:○○px"> <li><img src="hoge.jpg" width="100px"></li> <li><img src="hoge.jpg" width="100px"></li> </div> これをjqueryで取得して、width:○○pxに入れる方法を知りたいです。 画像のwidthは、共通です。 ご存知の方いらっしゃれば、ご教授をお願いいたします。
- kameleon30
- お礼率90% (9/10)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
lengthで要素数を数えることが出来ます。 $(".wrap *").length で、class=wrap の中の要素の数がわかります。 <li>のみの数を知りたいなら $(".wrap li").length でわかります。 なので、例をあげれば下のようになるかと。 var wrap_width = $(".wrap li").length * 100 +"px"; $(".wrap).css("width":wrap_width); cssでなく、attrで指定しても良いかもしれません。 ただ、class=wrapがいくつかあると、それらの要素すべてをカウントしてしまうので、idもつければ回避できるかと。
関連するQ&A
- jqueryで要素を別要素に表示したいが重なる
jqueryには詳しくないのですが、必要に迫られて下記のようなページを制作しています。 構造 1）menu画像をクリックすれば gazouboxでその画像が大きく表示され、（A,B) 2）別のmenu画像をクリックすれば contentの画像が変わり、（a1,a2,a3 → b1,b2,b3) 3)contentの画像をクリックすれば itemshowのDiv内に画像名と同じｓｒｃ．htmlが表示され、 4）それとともに そのcartの内容がcartpanelに表示されます。 実際のページではcartの内容は ショッピングカートのscriptタグを記載します。 ネットで調べて悪戦苦闘しながら上記の構造で動作するところまで漕ぎつけたのですが、 このHTMLでは 「・・のカートタグ」という文字が順に表示されますが 私の製作中のページでは積み重なります。 cartpanelにショッピングカートが表示されて、同一場所に重なって表示されていくので、 クリックした分だけ商品価格の部分が重なって行って 価格が読み取れなくなります。 恐らく、非表示にしているcartを画像クリックでcartpanelに表示するとき、 画像のclassに設定したsrcを cartの処理に同じように使えていないのが問題だろうとは思うのですが、 何日もネット検索しながらいろいろ調べては試してみたものの 基礎知識がないため解決できませんでした。 ページの必要最低限を書き出してみました。 contents画像（．switchButton）をクリックしたら、 そのクリックした画像用の cart だけが cartpanel に表示され 別の画像をクリックしたら 次の画像用のカートに切り替わってくれるようにするには プログラムをどのように修正すればよいでしょうか？ お手数かけますがご指導よろしくお願いいたします。 ---------------------------------------------------------------- <!doctype html> <html> <head> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <title>無題ドキュメント</title> <style type="text/css"> .full_content { position: relative; float: left;} .switchButton {list-style-type: none;} .menu{ width: 120px; height: 120px; list-style: none; text-align: center; display: block !important; cursor: pointer; border: 1px solid #F66; margin-top: 3px;} .menu:first-child {margin-left:0;} .hover { font-weight: bold; display: block !important;} .content { width: 100px; height: 200px; position: absolute; top: 250px;} .cartpanel { height: 200px; width: 150px;} .menu img { height: 120px; width: 120px;} #gazoubox { height: 200px; width: 200px; float: left; border: 1px solid #6F6; margin-bottom: 100px;} </style> <script type="text/javascript"> $(function () { $('#big').attr('src', $('.menu img:first').attr('src')); $('.menu img').click(function () { $('#big').attr('src', $(this).attr('src')); }); }); $ (function(){ $ (".content:not('.hover + .content')").hide(); $ (".menu").click(function(){ $(".menu").removeClass("hover"); $(this).addClass("hover"); $(".content:not('.hover + .content')").fadeOut(); $(".hover + .content").fadeIn(); }); }); $(document).ready(function(){ $('.itemshow').load('A.html'); $(".cart").css("visibility", "hidden"); $('.switchButton').click(function(){ var loadContents = $(this).attr('src'); $('.itemshow').load(loadContents+'.html'); ($(this).find(".cart").css("visibility", "visible")).appendTo('.cartpanel'); }); }); </script> <div id="gazoubox"><img id="big" /></div> <div class="itemshow"></div> <div class="cartpanel"></div> <div class="full_content"> <div class="menu hover"><img src="img/A.jpg" /></div> <div class="content"> <ul id="ilist"> <li class="switchButton" src="a1"><img src="img/a1.jpg" /> <div class="cart" src="a1">a1のカートタグ</div> </li> <li class="switchButton" src="a2"><img src="img/a2.jpg" /> <div class="cart" src="gk-pch-kuro">a2のカートタグ</div> </li> <li class="switchButton" src="a3"><img src="img/a3.jpg" /> <div class="cart" src="gk-pch-kuro">a3のカートタグ</div> </li> </ul></div> <div class="menu"><img src="img/B.jpg" /></div> <div class="content"> <ul id="ilist"> <li class="switchButton" src="b1"><img src="img/b1.jpg" /> <div class="cart" src="a1">b1のカートタグ</div> </li> <li class="switchButton" src="b2"><img src="img/b2.jpg" /> <div class="cart" src="b2">b2のカートタグ</div> </li> <li class="switchButton" src="b3"><img src="img/b3.jpg" /> <div class="cart" src="b3">b3のカートタグ</div> </li> </ul></div> </div> </body>
- ベストアンサー
- JavaScript
- liの数によってulの横幅を動的に設定したい
以下のようなhtmlがあったとして、ul.imageの幅をliの数によって動的に設定したいのですが、 jQueryで指定する場合どう書けばいいのかご教授下さい。 liはfloatしているものとします。 ====================================================== <div class="block"> <ul class="image"> <li><img src="hoge.jpg" alt="" /></li> <li><img src="hoge.jpg" alt="" /></li> <li><img src="hoge.jpg" alt="" /></li> </ul> </div> <div class="block"> <ul class="image"> <li><img src="hoge.jpg" alt="" /></li> <li><img src="hoge.jpg" alt="" /></li> <li><img src="hoge.jpg" alt="" /></li> <li><img src="hoge.jpg" alt="" /></li> <li><img src="hoge.jpg" alt="" /></li> <li><img src="hoge.jpg" alt="" /></li> </ul> </div> <div class="block"> <ul class="image"> <li><img src="hoge.jpg" alt="" /></li> </ul> </div> ...以下、いくつも.blockが続きます
- ベストアンサー
- JavaScript
- jCarouselLiteでwidth: 100%
jCarouselLiteを使用し、 .shopList内の<li>要素を横並びに並べたスライダーを作成しています。 <li>要素にwidth: 100%を指定し、 要素の表示を一つにしてウインドウサイズいっぱいのスライダーの作成を考えていました。（矢印をクリックすると、画像がウインドウの端から流れてくるイメージです） <li>内の要素<img class="productimgimg">は、ブロック指定してmargin-left/right:auto;でセンタリングしています。 が、ウインドウを可変しても通常の<div>要素にwidth: 100%指定した時のように 要素が付いてきません。 （リロードすれば指定位置である中央に戻るのですが……） コードは以下の通りです。 <!------------------html内--------------------> <head> $(function() { $(".shopList").jCarouselLite({ btnNext: ".next", btnPrev: ".prev", visible : 1, speed:800, easing: "easeInOutCubic" }); }); </head> <body> <div class="left"><div class="prev"> <img src="00000000g.png"> </div></div> <div class="right"><div class="next"> <img src="00000000.png"> </div></div> <div class="shopList"> <ul> <li><img src="1111111.jpg" width="000" height="000" class="productimg"/></li> <li><img src="2222222.jpg" width="000" height="000" class="productimg"/></li> <li><img src="3333333.jpg" width="000" height="000" class="productimg"/></li> <li><img src="444444.jpg" width="000" height="000" class="productimg"/></li> <li><img src="555555.jpg" width="000" height="000" class="productimg"/></li> <li><img src="666666.jpg" width="000" height="000" class="productimg"/></li> </ul> </div> </body> <!------------------css設定--------------------> .left { position: absolute; margin: 0; padding: 0; width: 20px; height: 34px; top: 250px; left: 30px; z-index: 11; /* 重なる順番 */ cursor: pointer; } .right { position: absolute; margin: 0; padding: 0; width: 20px; height: 34px; top: 250px; right: 30px; z-index: 10; /* 重なる順番 */ cursor: pointer; } .shopList { width: 100%; position: relative; margin: 0; padding: 0; height: 520px; } .shopList ul, .shopList ul li { margin: 0; padding: 0; float: left; display: inline; overflow: hidden; width: 100%; } .productimg { display: block; margin-left: auto; margin-right: auto; } <li>内の<img>要素が、常に画面のセンターにあるようにしたいのです。 よろしくお願いします。
- 締切済み
- JavaScript
- jQueryでn秒後に要素を最後に移動
$("#top_banner").append('<div style="width:245px; position:absolute; top:0px; left:0px;" class="banner banner2"><img src="01.jpg" width="100%" alt="" /></div>'); $("#top_banner").append('<div style="width:245px; position:absolute; top:0px; left:245px;" class="banner"><img src="02.jpg" width="100%" alt="" /></div>'); $("#top_banner").append('<div style="width:245px; position:absolute; top:0px; left:490px;" class="banner"><img src="03.jpg" width="100%" alt="" /></div>'); $("#top_banner").append('<div style="width:245px; position:absolute; top:0px; left:0px;" class="banner banner1"><img src="04.jpg" width="100%" alt="" /></div>'); $("#top_banner").append('<div style="width:245px; position:absolute; top:0px; left:245px;" class="banner"><img src="05.jpg" width="100%" alt="" /></div>'); $("#top_banner").append('<div style="width:245px; position:absolute; top:0px; left:490px;" class="banner"><img src="06.jpg" width="100%" alt="" /></div>'); $(".banner").click(function(){ $(this).prependTo("#top_banner"); }); $(".banner1").delay(1000).prependTo("#top_banner"); $(".banner2").delay(2000).prependTo("#top_banner"); <div style="width:750px; background-color:#808080; height:90px; padding-top:6px;"> <div style="width:735px; margin:auto; position:relative;" id="top_banner"> </div> </div> 上記のように記述し、n秒後に自動でバナーが切り替わるプログラムを作成しようしましたが、 うまく動作しません。 クリックすると切り替わるので、その要領で「delay(1000).prependTo("#top_banner")」と記述しました。 1秒後に画像が切り替わるかなと思いましたが、動作しませんでした。 delayはprependToには効かないのでしょうか。 また、上記ソースをもう少し完結にまとめることは可能でしょうか。
- ベストアンサー
- JavaScript
- 同HTML内で複数のjQueryを設置したいです
買ってきたjQueryの本を元に複数のjQueryを使用し、 タブメニュータイプのものと自動スライドショータイプのを 同じHTML内に入れたいのですが両方ともうまくいきません。 いろいろ自分なりに調べたのですが、わからないです。 うまくいく方法をどうか教えてもらえないでしょうか？ 宜しくお願いします。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>細かなCSS設定なしに、画像をロールオーバーさせる</title> <link rel="stylesheet" href="css/base.css" type="text/css" media="all" /> <script src="js/jquery.rollover.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript" charset="UTF-8"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="js/jquery.easing.1.3.js" type="text/javascript"></script> <script src="js/jquery.slideviewer.1.2.js" type="text/javascript"></script> <script type="text/javascript"> jquery(function() { jquery('div#gallery').slideView({ easeFunc: 'easeInOutBack',//少しバックするアニメーション easeTime: 1200,//アニメーションの時間 toolTip: true,//ツールチップの表示 ttOpacity: 0.5//ツールチップの透明度 }); }); </script> </head> <body> <div id="wrap"> <div id="gnav"> <ul> <li><a href="#"><img src="images/btn_01.jpg" alt="トップページ"></a></li> <li><a href="#"><img src="images/btn_02.jpg" alt="会社概要"></a></li> <li><a href="#"><img src="images/btn_03.jpg" alt="制作実績"></a></li> <li><a href="#"><img src="images/btn_04.jpg" alt="お問い合わせ"></a></li> <li><a href="#"><img src="images/btn_05.jpg" alt="お問い合わせ"></a></li> </ul> </div> <!-- END #gnav --> <div id="wrap"> <h1><img src="images/douga/logo.jpg" alt="PHOTO GALLERY" width="439" height="81" /></h1> <div id="gallery" class="svw"> <ul> <li><img src="images/douga/img_01.jpg" alt="PHOTO GALLERY 01" width="655" height="430" /></li> <li><img src="images/douga/img_02.jpg" alt="PHOTO GALLERY 02" width="655" height="430" /></li> <li><img src="images/douga/img_03.jpg" alt="PHOTO GALLERY 03" width="655" height="430" /></li> <li><img src="images/douga/img_04.jpg" alt="PHOTO GALLERY 04" width="655" height="430" /></li> <li><img src="images/douga/img_05.jpg" alt="PHOTO GALLERY 05" width="655" height="430" /></li> <li><img src="images/douga/img_06.jpg" alt="PHOTO GALLERY 06" width="655" height="430" /></li> <li><img src="images/douga/img_07.jpg" alt="PHOTO GALLERY 07" width="655" height="430" /></li> </ul> </div> </div><!-- END wrap --> <img src="images/arimura_ocean3.jpg" class="ocean"> <img src="images/arimura_ocean3.jpg"> <p class="pagetop"><a href="#"><img src="images/btn_pagetop.jpg" alt="上へ戻る" class="rollover"></a></p> </div> <!-- END #wrap --> </body> </html>
- ベストアンサー
- その他（プログラミング・開発）
- jqueryで画像切り替え
この場をお借りして教えて頂ければ幸いです。 jqueryについて、今現在添付画像のようなサムネイルをマウスオーバーしますと、 メイン画像が切り替わるようなものをｊjqueryを使用して制作しました。 ここから、setIntervalを使用して画像が何もしなければ勝手に切り替わるように、 またマウスオーバーをしている際は切り替わらないように、そしてマウスアウトしたら そこの画像から順にsetIntervalが開始されるようにしたいと思っております。 そこの作業が出来ず困っておりまして、是非ともお教え頂ければと思います。 今現在のhtml , css , jsの方は記載しておきます。※reset.cssは除きます。 <body> <div id="wrap"> <div id="sec1"> <div id="photoBox"> <ul id="photo"> <li><img src="img/plan1.jpg" alt="食1" /></li> <li><img src="img/plan2.jpg" alt="食2" /></li> <li><img src="img/plan3.jpg" alt="食3" /></li> </ul> <ul id="thumb"> <li class="first"><img src="img/plan1_s.jpg" alt="" /></li> <li><img src="img/plan2_s.jpg" alt="" /></li> <li><img src="img/plan3_s.jpg" alt="" /></li> </ul> </div> </div> </div> </body> -------------------------------------------------------------------- div#wrap{ width:394px; margin:0 auto; } div#photoBox{ width:394px; height:391px; padding:40px 0; border-bottom:1px solid #CCC; } div#photoBox ul#photo{ width:394px; height:295px; padding-bottom:5px; position:relative; } div#photoBox ul#photo li{ width:394px; height:295px; display:block; position:absolute; top:0; left:0; } div#photoBox ul#thumb{ width:394px; height:91x; position:relative; } div#photoBox ul#thumb li{ float:left; padding-left:5px; } div#photoBox ul#thumb li.first{ padding-left:0; } --------------------------------------------------------- (function(){ var photo = $('#photo').find('li'); var thumb = $('#thumb').find('li'); photo.hide().eq(0).show(); thumb.hover(function(){ $(this).stop().fadeTo('fast', 0.6); photo.stop().fadeTo('fast', 0) .eq($(this).index()) .stop().fadeTo('fast', 1); }, function(){ $(this).stop().fadeTo('fast', 1); }); })
- ベストアンサー
- JavaScript
- jQuery bxSlider でのアニメーション
jQueryのbxSlider を使用して、6枚のスライドギャラリー的なものを作っています。 各スライドがスライドした後に、onAfterSlide: function() を使用してオブジェクトのフェードをしたく以下の様に記述しています。１枚目から５枚目では、各スライドをした後にオブジェクトをフェードインでアニメーションができるのですが、最後のスライドのオブジェクトのみがアニメーションしません。コードは以下になります。どなたか最後のオブジェクトもアニメーションするスクリプトを教えていただけますでしょうか？ <script type="text/javascript"> $(function(){ var slider = $('#slider1').bxSlider({ controls: true, duration: 2000, easing: 'easeInOutQuart', onAfterSlide: function(currentSlide){ if(currentSlide==0){ $("#block").fadeIn("slow"); }else{ $("#block").hide(); } if(currentSlide==1){ $("#block2").fadeIn("slow"); }else{ $("#block2").hide(); } if(currentSlide==2){ $("#block3").fadeIn("slow"); }else{ $("#block3").hide(); } if(currentSlide==3){ $("#block4").fadeIn("slow"); }else{ $("#block4").hide(); } if(currentSlide==4){ $("#block5").fadeIn("slow"); }else{ $("#block5").hide(); } } }); $('.thumbs a').click(function(){ var thumbIndex = $('.thumbs a').index(this); slider.goToSlide(thumbIndex); $('.thumbs a').removeClass('pager-active'); $(this).addClass('pager-active'); return false; }); $('.thumbs a:first').addClass('pager-active'); }); </script> <ul id="slider1"> <li class="slider1-1"> <div id="block" style="background-color: red; width: 500px; height: 300px; position: absolute; top: 70px; left:100px;"> </div> </li> <li class="slider1-2"> <div id="block2" style="background-color: white; width: 500px; height: 300px; position: absolute; top: 70px; left:100px;"> </div> </li> <li class="slider1-3"> <div id="block3" style="background-color: black; width: 500px; height: 300px; position: absolute; top: 70px; left:100px;"> </div> </li> <li class="slider1-4"> <div id="block4" style="background-color: black; width: 500px; height: 300px; position: absolute; top: 70px; left:100px;"> </div> </li> <li class="slider1-5"> <div id="block5" style="background-color: black; width: 500px; height: 300px; position: absolute; top: 70px; left:100px;"> </div> </li> <li class="slider1-6"> <div id="block6" style="background-color: #FFF; width: 500px; height: 300px; position: absolute; top: 70px; left:100px;"> </div> </li> </ul> <div class="thumbs"> <a href=""><img src="img/1.jpg" width="50" height="50" /></a> <a href=""><img src="img/2.jpg" width="50" height="50" /></a> <a href=""><img src="img/3.jpg" width="50" height="50" /></a> <a href=""><img src="img/4.jpg" width="50" height="50" /></a> <a href=""><img src="img/5.jpg" width="50" height="50" /></a> <a href=""><img src="img/6.jpg" width="50" height="50" /></a> </div>
- ベストアンサー
- JavaScript
- Jqueryで画像タイトル表示させる
ギャラリーを作っていいるのですが、それぞれの画像ごとに説明文やタイトルを表示させたいのです。 サムネイルクリック後に大きな画像を、そのしたに説明文・タイトルをそれぞれ同時に表示させる方法を教えてください。 以下がソースになります。 (jQueryプラグインでサムネイルにフェードをかけています) ■HTML■ <!DOCTYPE html> <html> <head> <title>フォト ギャラリー サンプル #01</title> <link href="style.css" rel="stylesheet" type="text/css" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script> <script type="text/javascript"> $(function(){ $('a img').hover( function(){ $(this).fadeTo(200, 0.6); }, function(){ $(this).fadeTo(200, 1.0); } ); }); </script> </head> <body> <div id="wrapper"> <div class="image"> <div id="n1"><img src="big_01.jpg"title="aaaaaaaaaa/></div> <div id="n2"><img src="big_02.jpg" title="aaaaaaaaaa"/></div> </div> <div id="thum"> <ul> <li><a href="#n1" class="thum"><img src="thum_01.png" /></a></li> <li><a href="#n1" class="thum"><img src="thum_01.png" /></a></li> </ul> </div> </div><!--wrapper--> </body> </html> ■CSS■ #wrapper{ width:840px; border:solid #F00 1px; margin: 0 auto; padding: 0 40px; } .image { overflow: hidden; margin-top: 16px; width: 300px; height: 474px; border: 1px solid #ddd; float:left; } #thum{ margin-left: 310px; height:474px; } #thum img { border: #eee 2px solid; height:100px; width:100px; padding: 5px; margin-left: 7.5px; margin-bottom: 7px; float:left; } #thum li{ display:inline; list-style:none; } よろしくお願いします。
- 締切済み
- CSS
- ｊQueryの要素選択について
例えば、 <ul id="list"> <li style="width: 100px;">リスト１</li> <li style="width: 200px;">リスト２</li> <li style="width: 300px;">リスト３</li> </ul> というHTMLの、liのwidthの合計をjQueryを使って求めるには、どうすれば良いでしょうか？ for( prop in $("ul#list li") ) { width_sum += prop.width(); } こんな感じだと思っていたのですが・・・うまくいきません。 Javascript初心者です。 「その前に○○を勉強した方がいいよ」などのアドバイスはお控えいただいて、純粋に解答のみを教えていただければ幸いです。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- FireFoxでのレイアウト表示崩れについて
現在ホームページを作成しています。 CSSでのレイアウトに挑戦しており、ページ上部に横型のメニューを設置しました。 IEではうまく表示が出来たのですが、FireFoxで表示した際、横にメニューが並ばずに縦に並んでしまいます。google等で検索し調べたのですがうまくいきません。 よろしくお願いします。 以下ソース ◇HTML部分◇ <body> <div id = "wrap"> <div class = "header"> <div id = "h_wrap"> </div> <div id = "u_wrap"> <u class="hnavi"> <li><img src="img/top-menu-1.gif" alt="会社概要" width="149" height="60"</li> <li><img src="img/top-menu-2.gif" alt="業務内容" width="150" height="60"</li> <li><img src="img/top-menu-3.gif" alt="実績" width="151" height="60"</li> <li><img src="img/top-menu-4.gif" alt="店舗案内" width="149" height="60"</li> <li><img src="img/top-menu-5.gif" alt="採用情報" width="150" height="60"</li> <li><img src="img/top-menu-6.gif" alt="お問合せ" width="151" height="60"</li> </u> </div> </div><!-- /header --> <div class = "topwrap"> topimg </div><!-- /topwrap --> <div id = "inner"> <div = "mainwrap"> mainwrap </div><!-- /mainwrap --> <div = "sidewrap"> sidewrap </div><!-- /sidewrap --> <div class = "clear"><hr /></div> </div><!-- /inner --> <div id = "footer"> footer </div><!-- /footer --> </div><!-- /wrap --> </body> ◇CSS部分◇ body {text-align:center;} #wrap {width:900px; margin:0 auto; text-align:left; } .header {height:130px; } .topwrap {height: 300px;} #inner { margin:0 10px; } #mainwrap {width:690px; float:left; } #sidewrap {width:170px; float:right;} .clear {clear: both;} .clear hr {display: none;} .footer {height:118px;} /*----------------------------------------------------- headder ---------------------------------------------------- */ #h_wrap {height: 80px;} #u_wrap { height: 60px; margin: 0; padding: 0; } .hnavi { margin: 0; padding: 0; } .hnavi li { display: inline; list-style:none; float: left; margin: 0; padding: 0; } 以上です。 宜しくお願いします。
- ベストアンサー
- HTML
お礼
rock name様 ご回答ありがとうございます。 知識が無くて、誠に恐縮なのですが、実際のソースとしましては、下記で過不足ございますでしょうか？ <head> <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script> <script> var wrap_width = $(".wrap li").length * 100 +"px"; $(".wrap").css("width":wrap_width); </script> </head> <body> <div class="wrap"> <li><img src="hoge.jpg" width="100px"></li> <li><img src="hoge.jpg" width="100px"></li> </div> </body> ご教授願えれば幸いです。 宜しくお願いいたします。
補足
すみません。自己解決いたしました。 <script type="text/javascript">google.load("jquery", "1.2.6");</script> <script type="text/javascript"> $(function(){ var wrap_width = $(".wrap li").length * 100 +"px"; $(".wrap").css("width",wrap_width); }) </script> </head> <body> <div class="wrap"> <li><img src="hoge.jpg" width="100px"></li> <li><img src="hoge.jpg" width="100px"></li> </div> </body> </html>