JS：将1个ul拆分并替换为2个相等的ul

Question

我有一个变量，我在其中搜索 ul。我希望每个 ul 分成 2 个相等的 ul，并用这 2 个新的 ul 替换原来的 ul。

我不能用 CSS 做到这一点，因为我希望每列从上到下显示 li，而不是从左到右显示。

我有以下代码，但我现在卡住了......

<script type="text/javascript">
var wid_tekst1 = "<?php echo $wid_tekst1; ?>";
$(wid_tekst1).filter('ul').each(function() {

    //Create array of all posts in lists
    var postsArr = new Array();
    $postsList = $(this);

    $(this).find('li').each(function(){
        postsArr.push($(this).html());
    })

    //Split the array at this point. The original array is altered.
    var firstList = postsArr.splice(0, Math.round(postsArr.length / 2)),
    secondList = postsArr,
    ListHTML = '';
    function createHTML(list){
        ListHTML = '';
        for (var i = 0; i < list.length; i++) {
            ListHTML += '<li>' + list[i] + '</li>'
        };

    }

    //$(firstList).before('<ul>');
    //$(firstList).after('</ul>');

    //$(secondList).before('<ul>');
    //$(secondList).after('</ul>');

    alert(firstList);
    alert(secondList);

})
</script>

感谢您的帮助...

更新：

我现在有以下内容：

<script type="text/javascript">
$( document ).ready(function() {
var wid_tekst1 = $('.content');

$(wid_tekst1).filter('ul').each(function() {
    var $li = $(this).children(),
        $newUl = $('<ul>').insertAfter(this),
        middle = Math.ceil($li.length / 2) - 1;
    $li.filter(':gt(' + middle + ')').appendTo($newUl);

    //alert($newUl); 
});
});
</script>

它不会将 ul 分成 2。我让它工作的唯一方法是设置

var wid_tekst1 = "*";

但如果我将变量 wid_tekst1 设置为 all，它会替换网页中的所有 ul。我只想替换 .content-class 中的 ul

谢谢

Answer 1

您的代码可以优化：

$(wid_tekst1).filter('ul').each(function() {
    var $li = $(this).children(),
        $newUl = $('<ul>').insertAfter(this),
        middle = Math.ceil($li.length / 2) - 1;
    $li.filter(':gt(' + middle + ')').appendTo($newUl);    
});

演示：http://jsfiddle.net/R3VYZ/

与 innerHTML 混淆（当您使用字符串构造列表时）并不理想，因为如果绑定了某些内容，您将丢失所有事件原始处理程序。