Question

我想计算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语句不起作用。

我的代码应该如何使其成功？

Answer 1

id应该是唯一的（删除它，你已经有一个类）..使用类

使用jquery

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

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

解释

$('.imageItem')＆gt;选择具有类imageItem的元素..因此它选择图像。 .css({width :'200px'});＆gt;将Css属性添加到所选元素..因此这会为两个图像添加宽度。和砰！看到你拥有它...... :)

Answer 2

首先定义不同的图像ID

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

Answer 3

好的第一个想法是不要有2个具有相同ID的div，而是使用智能ID

所以我ASUME你想知道你有多少“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");
}

Answer 4

count = $("#images img").length;
alert(count);
if (count == 2) {
   // document.getElementById(imageItem).style.width = '200px';
   $('.imageItem').width(200);
}

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

Answer 5

那是行不通的，因为只有第一张图片会因为id冲突才会有width，所以你为什么不这样循环呢？

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

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

演示：http://jsfiddle.net/eXr2n/

JQuery计算子元素并使用if语句修改CSS

5 个答案: