0

在 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 的共享类名称添加或删除一个“活动”类）：

$('.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。我想另一个循环是有道理的，但我试图弄清楚如何。任何帮助将不胜感激。

4

2 回答 2

1

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

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

在第四个中：

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

摆弄结果。

于 2013-04-23T18:38:44.110 回答
0

可能遗漏了一些东西，根据我所看到的，这应该涵盖了基础

    $(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');
                }
            });
        });
    });
于 2013-04-23T18:58:04.923 回答