0

div の子要素を数えて、結果に応じて JS で CSS を変更したいと考えています。

これが私のコードです：

<div id="images" class="images">
     <img id="imageItem" class="imageItem" src="http://www.foreclosurelistings.com/images/resources/los-angeles-ca/living-los-angeles.jpg" alt="Scrap image" />
     <img id="imageItem" class="imageItem" src="http://www.foreclosurelistings.com/images/resources/los-angeles-ca/living-los-angeles.jpg" alt="Scrap image" />
</div>

JQuery:

count = $("#images img").length;
alert(count); //this alert has to be removed when if statement works
if (count == 2) {
   document.getElementById(imageItem).style.width = '200px';
}

count 変数の結果をアラート ボックスで表示すると、それは正しいので、JQuery は子要素 (div 画像内の画像) を正しくカウントします。しかし、if ステートメントは機能しません。

これを機能させるには、私のコードはどのように見えるべきですか?

4

5 に答える 5

3

id は一意である必要があります (削除してください。すでにそこにクラスがあります)..use class

jqueryの使用

  var count = $("#images img.imageItem").length;

  if (count == 2) {
    $('.imageItem').css({width :'200px'});
  }

説明

$('.imageItem')> クラス imageItem.. を持つ要素を選択するため、両方の画像を選択します。 .css({width :'200px'});>選択した要素にCssプロパティを追加します..これにより、両方の画像に幅が追加されます。そしてバン!!!! あなたがそれを持っていることを参照してください.. :)

于 2013-08-01T11:59:45.617 に答える
1

最初のアイデアは、同じ ID を持つ 2 つの div ではなく、インテリジェントな ID を持つことです

だから私はあなたがどれだけの「imageItem」を持っているか、そしてあなたがいくつかのスペースに広がっているかを知りたいと思います

これは大雑把な推測なので、私の推測は次のとおりです。

HTML:

<div id="images" class="images">
    <img id="imageItem_1" class="imageItem" src="" />
    <img id="imageItem_2" class="imageItem" src="" />
</div>

JS:

count = $("#images img").length;
alert(count);
for(var i=1, i<=count; i++) {
    $("#imageItem_" + i).css("width ", "200px");
}
于 2013-08-01T12:06:00.787 に答える
0 
count = $("#images img").length;
alert(count);
if (count == 2) {
   // document.getElementById(imageItem).style.width = '200px';
   $('.imageItem').width(200);
}

ここで 1 点、同じ ID を使用しないでください。ID は要素ごとに一意である必要があります。

于 2013-08-01T12:03:07.630 に答える
0

IDの競合のために最初の画像だけが を持つwidthため、それは機能しません。

var images = $("#images img");

if( images.length === 2 ) {
    images.each(function(){
       this.style.width = '200px'
    });
}

デモ: http://jsfiddle.net/eXr2n/

于 2013-08-01T12:12:37.173 に答える