Question

我已经看到很多类似问题的答案，但似乎无法解决我的具体案例。我的jQuery逻辑仅适用于.each()函数中的最后一个元素。谁能帮我理解为什么？最后，我正在尝试将列表中的项目拆分为两列。

这是HTML：

<ul class="sub-menu">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
    <li>item 6</li>
    <li>item 7</li>
    <li>item 8</li>
</ul>
<ul class="sub-menu">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
    <li>item 6</li>
    <li>item 7</li>
    <li>item 8</li>
</ul>
<ul class="sub-menu">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
    <li>item 6</li>
    <li>item 7</li>
    <li>item 8</li>
</ul>

这是我的jQuery

<script type="text/javascript">
jQuery(document).ready(function(){

        var col1 = jQuery('<li class="col1">col1</li>'); // object which I will append the list items into
        var col2 = jQuery('<li class="col2">col2</li>'); // object which I will append the list items into

        jQuery('.sub-menu').each(function() {
            var items = jQuery(this).html(); // get original items from list
            jQuery(this).empty(); // clear original items from list

            jQuery(this).append(col1).append(col2); // just appending new columns for now, will add the original items to either col1 or col2 once this is working.
        });

});
</script>

我的代码正确捕获了原始列表项并清除了当前的.sub-menu列表，但是将列添加到列表中只发生在.each()循环中的最后一个元素。换句话说，这两列只会添加到最后一个.sub-menu，而前两个列最终没有列表项。

想法？

Answer 1

您所描述的问题是您将col1和col2附加到第一个列表，然后将相同的元素附加到第二个，最后添加到第三个。

您需要每次创建新元素，或复制原件。

这是更新的代码（我添加了.clone()，其中附加了col1和col2） var col1 = jQuery（'col1'）; //我将附加列表项的对象 var col2 = jQuery（'col2'）; //我将列表项附加到

的对象

jQuery('.sub-menu').each(function() {
    var items = jQuery(this).html(); // get original items from list
    jQuery(this).empty(); // clear original items from list

    jQuery(this).append(col1.clone()).append(col2.clone()); // just appending new columns for now, will add the original items to either col1 or col2 once this is working.
        });

Answer 2

您正试图找到：

var col1 = jQuery('<li class="col1">col1</li>');

您找不到尚不存在的对象。只需删除jQuery功能，如下所示：

var col1 = '<li class="col1">col1</li>';
var col2 = '<li class="col2">col2</li>';

http://jsfiddle.net/frnYY/

jQuery .each（）仅适用于最后一个元素

2 个答案: