Question

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

我无法使用CSS执行此操作，因为我希望每个列从上到下显示，而不是从左到右。

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

<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进行混乱（使用字符串构造列表时）并不理想，因为如果存在绑定内容，您将丢失所有事件原始处理程序。

JS：拆分并将1 ul替换为2等于ul

1 个答案:

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