Question

我正在尝试将逗号分隔列表转换为＆lt; ul＆gt;列表。

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”和“banana”之间的第一个逗号仅替换为“＆lt; li＆gt;”，并且缺少“＆lt; / li＆gt;”移到最后，在“甜瓜”后面？

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

Answer 1

这是一种方法：

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

Answer 2

请参阅pen

<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('');

Answer 3

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

不是。这只是您创建的无效html的结果：

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

将解析转换为

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

使用.html()时。它被<ul><li>…</li></ul>包裹在.wrapInner中 - 这会导致您使用嵌套<li>标记的无效DOM。

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

是。我推荐

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

Answer 4

因为您已将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>');});

Answer 5

如果您只想做这件事，请使用简单的（未经测试的）单行代码，例如'<ul><li>' + document.getElementsByClassName("fruit")[0].textContent.replace(',', '</li><li>') + '</li></ul>'。

另一方面，如果你想在不同的地方重复使用它（动态类名，元素类型等），那么你需要重构为正确的方法。

Answer 6

我推荐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.

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

6 个答案: