如何将逗号分隔的列表转换为<ul>列表

How do I convert a comma separated list into a <ul>list in JavaScript?

本文关键字：列表 lt ul gt 转换 分隔      更新时间：2023-09-26

我正在尝试将逗号分隔的列表转换为<ul>列表

HTML

<div class="fruit">apple,banana,melon</div>

JS-

$('.fruit').each(function(){
    var txt = $(this).text();
    $(this).html(txt.replace(/,/g,'</li><li>'));
}).wrapInner('<ul><li></li></ul>');

我本以为。。。

<div class="fruit">
    <ul>
        <li>apple</li>
        <li>banana</li>
        <li>melon</li>
    </ul>
</div>

但是，结果是…

<div class="fruit">
    <ul>
        <li>apple
        <li>banana</li>
        <li>melon</li>
        </li>
    </ul>
</div>

为什么"apple"answers"banana"之间的第一个逗号只替换为'<li>'，而缺失的'<li>'移动到最后，在"甜瓜"后面？

或者，我应该使用其他方法，如split（）&join（）以获得正确的结果？

这是一种方法：

$('.fruit').html(function(_, oldHTML) {
   return '<ul><li>' + oldHTML.split(',').join('</li><li>') + '</li></ul>';
});

请参考笔

<div class="fruits">apple,banana,melon</div>

var fruitsNode = document.querySelector('.fruits');
var fruits = fruitsNode.innerHTML.split(',');
var fruitsHTML = [];
fruits.forEach(function(fruit){
  fruitsHTML.push('<li>' + fruit + '</li>');
});
fruitsNode.innerHTML = fruitsHTML.join('');

因为您将wrapInner应用于each。您的正则表达式正常。

要修复它，请将wrapInner应用于html:

    $('.fruit').each(function(){
        var txt = $(this).text();
        $(this).html(txt.replace(/,/g,'</li><li>')).wrapInner('<ul><li></li></ul>');
    });

但是，您传递给wrapInner的内容是无效的html。这不会破坏东西，但我更喜欢这样更干净的东西：

$('.fruit').each(function(){
    var txt = $(this).text();
    $(this).html('<ul><li>' + txt.replace(/,/g,'</li><li>') + '</li></ul>');});

为什么"apple"和"banana"之间的第一个逗号只替换为<li>，而缺少的</li>移动到"melon"后面的最后一个逗号？

事实并非如此。这只是您创建的无效html的结果：

apple</li><li>banana</li><li>melon

将解析为的

apple<li>banana</li><li>melon</li>

当您使用CCD_ 11时。它被.wrapInner包装到<ul><li>…</li></ul>中，这导致您看到的带有嵌套<li>标记的无效DOM。

我应该使用其他方法吗，比如split（）&join（）以获得正确的结果？

是的。我推荐

$('.fruit').contents().replaceWith(function(){
    return $('<ul>').append($(this.data.split(",")).map(function() {
        return $('<li>').text(this).get();
    }));
})

如果这就是你想要做的，那么就使用一个简单的（未经测试的）一行，比如'<ul><li>' + document.getElementsByClassName("fruit")[0].textContent.replace(',', '</li><li>') + '</li></ul>'。

另一方面，如果你想在不同的地方（动态类名、元素类型等）重用它，那么你就需要重构成一个合适的方法。

我推荐Vohuman的方法。这只是另一种方法。。不那么方便，但仍然是一种选择。

var getContent = $('.fruit').html().split(',');
var list = '<ul>';
$(getContent ).each(function(key,value){
    list += '<li>'+ value +'</li>';
    }
list += '</ul>'; //list now contains a complete list.
相关文章：