jQuery循环中div的不同CSS [重复]答案

【问题标题】：Different CSS for divs in jQuery loop [duplicate]jQuery循环中div的不同CSS [重复]
【发布时间】：2014-09-13 19:35:25
【问题描述】：

我想做一个 jQuery 淡入淡出循环，例如 here in this jsfiddle

但我想为每个 .trip 元素保持不同的 css 定位，即淡入淡出的元素。

例如对于元素 <div id="3" class="trip">Item3</div> ，我想添加定位，以便它在淡入时显示左 200px，例如在这个 css 中：

#3{position:absolute; left:200px;}

AND 另一个元素

#2{position:absolute; left:100px;top:100px;}

使用 jsfiddle 中的当前代码，将元素加载到页面上的同一位置。

我尝试像上面那样将 css 添加到不同的元素，但它仍然加载到与 jsfiddle 相同的位置。

我该如何解决这个问题？

【问题讨论】：

ID 不能以数字开头，仅供参考。
他是对的，如果您添加 CSS 并将 ID 更改为 div1 div2 和 div3 就可以了。
我使用数字格式的 id 在 jquery 循环中计数。但我将它添加为 class="trip one" 等，并将 css 用作 .trip.one，现在它可以正常工作了

标签： javascript jquery html css loops

【解决方案1】：

您可以为每个 id 设置边距

CSS：

#a2 { margin-left: 200px; }
#a3 { margin-left: 400px; }

HTML：

<div id="main">
   <div id="one" class="trip">Item1</div>
   <div id="two" class="trip">Item2</div>
   <div id="three" class="trip">Item3</div>
</div>

DEMO Here

【讨论】：

【解决方案2】：

您不能在 CSS 中以数字开头。 Try this

HTML

<div id="main">
    <div id="one" class="trip">Item1</div>
    <div id="two" class="trip">Item2</div>
    <div id="three" class="trip">Item3</div>
</div>

CSS

#two{position:absolute; left:100px;top:100px;}    
#three{position:absolute; left:200px;}

【讨论】：

工作小提琴：jsfiddle.net/SaQXY/1
HTML5 说你可以用数字开始 ID :D
@tymeJV 以数字开头的 ID 在 HTML5 中完全有效。问题是，CSS 选择器将无法正常工作...... :)

【解决方案3】：

或者你可以动态地给他们保证金，像这样：

function go() {
    $elem.eq(i % l).fadeIn(700, function() {
        $elem.css( { marginLeft :( (i+1) * 100)+ "px", marginRight :((i+1) * 100) + "px" } );
        $elem.eq(i % l).fadeOut(700, go);
        i++;
    })
}

【讨论】：

【解决方案4】：

正如其他人所说，不要以数字开头的 ID。无效。

但是，如果您绝对必须这样做（也许这不是您的 HTML），您可以像这样为他们提供 CSS 规则：

[id='2'] { margin-left:200px; }
[id='3'] { margin-left:400px; }

但是，如果可以，请再次修复 ID 名称。你会遇到更少的问题。

【讨论】：