Question

在jQuery中解决这个问题时遇到一些麻烦：我需要在早期的UL中将LI的内容添加到以后的UL中，如果它们共享同一个类。换句话说，我在HTML中有以下两个列表：

<ul id="bullet-content">
    <li class="shared-class-1">
        <h3>First Title</h3>
        <p>First Content</p>
    </li>
    <li class="shared-class-2">
        <h3>Second Title</h3>
        <p>Second Content</p>
    </li>
</ul>

然后：

<ul class="bullets">
     <li class="shared-class-1">
         <h3 class="bullet-title">#</h3>
         <p class="bullet-content">#</p>
     </li>
     <li class="shared-class-2">
         <h3 class="bullet-title">#</h3>
         <p class="bullet-content">#</p>
     </li>
</ul>

要将内容从“bullet-content”传输到“bullets”，我有以下jQuery（它还根据li的共享类名称添加或删除'active'类）：

$('.bullets li').each( function(j) { 
    var classes = this.className.split(/\s+/); 
    for (var j=0,len=classes.length; j<len; j++){             
        var bulletDisplay = $('#bullet-content li');
        var bulletContentTitle = $(bulletDisplay).find('h3').html();
        var bulletContentBody = $(bulletDisplay).find('p').html();                    
        if ($(bulletDisplay).hasClass(classes[j])){ 
            $(this).addClass('active');
            $(this).find('h3').html(bulletContentTitle);
            $(this).find('p').html(bulletContentBody);
        } else {
            $(this).removeClass('active');
        }
    }   
});

这种作品，但两个'.bullets li'最终都填充了相同的内容 - 来自'bullet-content'的第一个li，而不是来自这两个lis。我想另一个循环是有道理的，但我想弄清楚如何。任何帮助将不胜感激。

Answer 1

您需要做的就是使用当前.bullet-content li元素的索引来选择相应的.bullets li。为此，只需要进行两次小的更改 - 在脚本的第一行（请注意，此处j已替换为i - 我们稍后会使用它，但使用相同内容并不是一个好主意无论如何，索引的变量）：

$('.bullets li').each( function(i) {

并在第四个：

var bulletDisplay = $('#bullet-content li:eq(' + i + ')');

fiddle结果。

Answer 2

根据我所看到的情况，

可能已经遗漏了一些东西，这应该涵盖基础

    $(function ()
    {
        $('li', $('#bullet-content')).appendTo('.bullets');

        $('.bullets li').each(function ()
        {
            $($(this).attr('class').split(' ')).each
            (function ()
            {
                if($('.' + this).length > 1)
                {
                    $('.' + this).addClass('active');
                }
                else
                {
                    $('.' + this).removeClass('active');
                }
            });
        });
    });

jQuery - 根据共享类将内容从一个UL添加到另一个UL

2 个答案: