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';
}

当我使用警报框显示计数变量的结果时，它是正确的，因此 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

好的第一个想法是不要有 2 个具有相同 ID 的 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 回答
1

首先定义不同的图像id

if (count == 2) {
    $('.imageItem').css('width', '200px');
 }
于 2013-08-01T12:01:16.173 回答
0 
count = $("#images img").length;
alert(count);
if (count == 2) {
   // document.getElementById(imageItem).style.width = '200px';
   $('.imageItem').width(200);
}

这里有一点，不要使用相同的 id，每个元素的 id 应该是唯一的，

于 2013-08-01T12:03:07.630 回答
0

那是行不通的，因为只有第一个图像会width因为 id 冲突，所以你为什么不像这样循环遍历它们

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 回答