1

我已经看到了很多类似问题的答案，但对于我的具体情况似乎无法弄清楚。我的 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，而前两列最终没有列表项。

想法？

4

2 回答 2

3

您描述的问题是您将 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.
        });​
于 2012-07-26T18:51:46.740 回答
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/

于 2012-07-26T18:48:38.247 回答