Question

我想更改列表中某些徽章的颜色。

localStorage

它仍适用于jQuery，例如：

<div id="tree">
<ul class="list-group">
    <li class="list-group-item node-tree" ><span class="icon expand-icon glyphicon glyphicon-minus"></span><span class="icon node-icon"></span><a href="#" style="color:inherit;">Test</a><span class="badge">123</span><span class="badge">123</span><span class="badge">3223</span><span class="badge">23</span><span class="badge">323</span></li>
    <li class="list-group-item node-tree"><span class="icon expand-icon glyphicon glyphicon-minus"></span><span class="icon node-icon"></span><a href="#" style="color:inherit;">Test 1</a><span class="badge">321</span><span class="badge">123</span><span class="badge">3223</span><span class="badge">23</span><span class="badge">323</span></li>
</ul>
</div>

但我的问题是，当生病改变树时，我需要再次调用该方法（并再次调用..） - 所以我更喜欢用CSS创建相同的方法，但是当生病时尝试使用：

 $("#tree .list-group-item").each(function(){

            $(this).find('.badge:eq(4)').css('background-color','#bf5329');
            $(this).find('.badge:eq(4)').css('color','#fff');

            $(this).find('.badge:eq(3)').css('background-color','#2ab27b');
            $(this).find('.badge:eq(3)').css('color','#fff');

            $(this).find('.badge:eq(2)').css('background-color','#bf5329');
            $(this).find('.badge:eq(2)').css('color','#fff');

            $(this).find('.badge:eq(1)').css('background-color','#2ab27b');
            $(this).find('.badge:eq(1)').css('color','#fff');

            $(this).find('.badge:eq(0)').css('background-color','#3B4752');
            $(this).find('.badge:eq(0)').css('color','#fff');
        });

它没有设置每个.list-group-item，只有第一个（并且有大约100个“行”。

有什么想法吗？

这是一个小提琴： https://jsfiddle.net/DTcHh/30190/

使用CSS更新： https://jsfiddle.net/DTcHh/30192/

感谢您的回答 - 但如果还有其他问题，生病仍有问题

#tree .list-group-item .badge:nth-child(1) {
    background-color: #bf5329;   
}

在我的

中

 <span>

在这种情况下，它是一个树视图，并且有一些“缩进”类。点击这里：

https://jsfiddle.net/DTcHh/30196/

还有什么想法？

Answer 1

此处CSS中的"<option value='"+ newElement +"'>" + newElement + "</option>"相当于$('.badge').eq(0)，因为第一个.badge:nth-child(4)是其父亲的第4个孩子。然后你可以将它递增1来定位其余部分。

.badge

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}

span.badge {
  color: #fff;
}
span.badge:nth-child(4) {
  background: #3B4752;
}
span.badge:nth-child(5) {
  background: #2ab27b;
}
span.badge:nth-child(6) {
  background: #bf5329;
}
span.badge:nth-child(7) {
  background: #2ab27b;
}
span.badge:nth-child(8) {
  background: #bf5329;
}

Answer 2

您的每个.list-group-item都包含以下元素：

<span class="icon expand-icon glyphicon glyphicon-minus"></span>
<span class="icon node-icon"></span>
<a href="#" style="color:inherit;">Test</a>
<span class="badge">123</span>
<span class="badge">123</span>
<span class="badge">3223</span>
<span class="badge">23</span>
<span class="badge">323</span>

然后，例如.list-group-item .badge:nth-of-child(1)会选择list-group-item的每个孩子

有班级.badge和
是其父母的第一个孩子。

但是，list-group-item的第一个孩子是<span class="icon /* ... */"></span>，因此选择器将不匹配。您可以选择迈克尔·科克在答案中描述的内容（选择第4个孩子，依此类推）或使用例如图标的<i>标记，因此您可以使用nth-of-type-selector：

span:nth-of-type(1) { /* ... */ }

最适合你的例子的是一些 nth-of-class -selector，不幸的是does not exist。它将允许最大的灵活性与元素的数量（迈克尔的答案中没有给出）和最大的灵活性使用<span>也适用于.list-group-item的其他孩子，这不是徽章（在我的回答中没有给出）。

使用CSS更改具有相同类的多个元素的颜色（行中DOM元素的不同计数）

2 个答案: