如何使用css或javascript为同一类添加不同的css？（已编辑）

编辑：如果可能，解决Q1，然后回复Q2

Q1）例如，我有一些类似的html

<div class="toggle-menu-wrap">
    <div class="toggle-menu-wrap">
        <ul id="menu-main-menu" class="main-menu sidebar-menu subeffect-fadein-left">
            <li class="menu-item narrow">
                <div class="popup gotomenutop">
                    <ul class="sub-menu gotosubmenu">
                        <li class="menu-item"><a href="">Main Demo</a></li>
                        <li class="menu-item"><a href="">Construction</a></li>
                        <li class="menu-item"><a href="">Hotel</a></li>
                    </ul>
                </div>
            </li>
            <li class="menu-item narrow">
                <div class="popup gotomenutop">
                    <div class="popup gotomenutop">
                        <ul class="sub-menu gotosubmenu">
                            <li class="menu-item"><a href="">Main Demo</a></li>
                            <li class="menu-item"><a href="">Construction</a></li>
                            <li class="menu-item"><a href="">Hotel</a></li>
                        </ul>
                    </div>
                </div>
            </li>
            <li class="menu-item narrow">
                <div class="popup gotomenutop">
                    <div class="popup gotomenutop">
                        <ul class="sub-menu gotosubmenu">
                            <li class="menu-item"><a href="">Main Demo</a></li>
                            <li class="menu-item"><a href="">Construction</a></li>
                            <li class="menu-item"><a href="">Hotel</a></li>
                        </ul>
                    </div>
                </div>
            </li>
            <li class="menu-item narrow">
                <div class="popup gotomenutop">
                    <div class="popup gotomenutop">
                        <ul class="sub-menu gotosubmenu">
                            <li class="menu-item"><a href="">Main Demo</a></li>
                            <li class="menu-item"><a href="">Construction</a></li>
                            <li class="menu-item"><a href="">Hotel</a></li>
                        </ul>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>

您可以清楚地看到，对于

.gotomenutop

，最大值之间的差异是

42

。 我怎样才能做到这一点？？和 问题2）

第一个gotosubmenu第一个li具有“top”值：-5px

第一个GOTOSBMENUS第二个li具有“top”值：-40px

第一个gotosubmenu第三个li具有“top”值：-75px

第一个gotosubmenu第四个li具有“top”值：-110px 对第二个gotosubmenu和第一个li重复同样的事情 我如何才能实现这一点，以及这一切都是动态生成的

JQuery和javascript都可以…对我来说..

使用伪类选择器

li:nth-child(1) > .gotomenutop {
  top: 0px;
}
li:nth-child(2) > .gotomenutop {
  top: -42px;
}
li:nth-child(3) > .gotomenutop {
  top: -84px;
}
li:nth-child(4) > .gotomenutop {
  top: -126px;
}

注意：仅限于一定数量的元素

// get all elements and convert into array
// for older browser use - [].slice.call()
Array.from(document.querySelectorAll('.gotomenutop'))
  // iterate over the elements
  .forEach(function(ele, index) {
    // apply the style property
    ele.style.top = index * -42;
  })    

---

更新：如果有随机数目的元素，那么最好使用jQuery。将jQuery方法与回调一起使用，在回调中，第一个参数保存索引并基于索引生成属性值

$('.gotomenutop').css('top', function(i) {
  // generate the value
  return i * -42;
}) 

---

或者通过获取和迭代元素来使用纯Javascript

// get all elements and convert into array
// for older browser use - [].slice.call()
Array.from(document.querySelectorAll('.gotomenutop'))
  // iterate over the elements
  .forEach(function(ele, index) {
    // apply the style property
    ele.style.top = index * -42;
  })    

---

我建议使用@Pranav-answer，不过这里有使用方法的jQuery选项

$（'.gotomenutop'）.css（'top'，函数（索引，x）{
回归指数*42；
})

1.


2.


3.


4.

如果要使用jquery，请使用with callback。在回调函数中，设置与元素索引相关的top值

$(".gotomenutop").css("top", function(i){
    return i * -42;
});

---

更新： 对于第二个问题，您应该使用and循环遍历

.gotosubmenu

，迭代每个

li

标记，并使用上述代码向其添加css

$(".gotosubmenu").each(function(){
  $(this).find("li").css("top", function(i){
    return (i * -35) - 5;
  });
});

---

所以，本质上，每一个李的利润是双倍的，对吗？您预先知道的lis数量是固定的/最大的，还是必须是动态的？@Connum lis是动态生成的，它没有固定的计数..好的，那么您要么定义您认为需要的CSS规则，要么使用jQuery方法！您已经接受了答案，现在编辑了问题，这使答案变得毫无意义。最好贴一个新的question@Satpal我知道…我在下面告诉过你，但你没有回答，所以我必须编辑它…如果你有答案，那么就给它，否则就留下它…好的，我无法得到它，请你详细解释一下。。pls@amreshsingh代码通过

.gotomenutop

元素循环，并为每个元素添加css。函数中的

i

变量是以0开头的元素的索引。为了更好地理解see hay@Mohammad你能提问吗？我刚刚编辑了它，你能帮我做第二部分吗..请..hay@Satpal是一种重置索引和计算的方法，在它离开第一个gotomenutop类后重新开始..hay你能帮我吗，因为我在gotomenutop中有另一组

标记类似于

的结构，我想对每个gotosubmenus做同样的事情，但每当它离开第一个gotosubmenus，然后再次从零开始计算。。。。

$(".gotosubmenu").each(function(){
  $(this).find("li").css("top", function(i){
    return (i * -35) - 5;
  });
});