Question

从里面的div中获取类并添加到相同的li。

列表项看起来与此类似：

<li class="original">
<div id="one" class="text">foo</div>
<div id="two" class="photo">foo</div>
<div id="three" class="video">foo</div>
</li>

<li class="original">
<div id="one" class="text">foo2</div>
<div id="two" class="photo">foo2</div>
<div id="three" class="video">foo2</div>
</li>

...

我需要从id列为“3”的每个列表项的div中获取类，并将其添加到父li的类中。因此，在代码运行后，列表将如下所示：

<li class="original video">
<div id="one" class="text">foo</div>
<div id="two" class="photo">foo</div>
<div id="three" class="video">foo</div>
</li>

<li class="original text">
<div id="one" class="video">foo2</div>
<div id="two" class="photo">foo2</div>
<div id="three" class="text">foo2</div>
</li>

我试过这样的事情，但它只更新了第一个列表项：

$("#three").each(function(i) { 
    var newclass = $(this).attr("class");                   
   $(this).parent().addClass(newclass);
});

提前感谢您的帮助！

Answer 1

如果您遇到重复ID

 $('[id="three"]').each(function(){  
     $(this).parent().addClass( this.className);

})

Answer 2

您不能拥有多个具有相同ID的元素。在这种情况下，jquery每个都在做正确的事情并找到第一个ID然后停止。您可以通过使用该类来解决此问题：

<li class="original video"><div class="text one">foo</div></li>
<li><div class="photo two">foo</div></li>
<li><div class="video three">foo</div></li>

<li class="original"><div class="video one">foo2</div></li>
<li><div class="text two">foo2</div></li>
<li><div class="photo three">foo2</div></li>

然后是jquery：

$(".three").each(function(i) { 
var newclass = $(this).attr("class");                   
$(this).parent().addClass(newclass);
});

Answer 3

这是您可能想要查看的另一种解决方案：demo

这里是JS代码（修复了上面评论过的人们破坏的HTML问题，但保留了重复的ID）

$(document).ready(function(){

    $('.original').each(function(i) {
    var div = $(this).find('div').eq(2);
    var newclass = $(div).attr("class");                   
   $(this).addClass(newclass);
});
    });

从里面的div中获取类并添加到相同的li

3 个答案: