如何用 <li> 标签在每个新行中包装 HTML 文本？

Question

我有这个代码：

<aside id="jmfe_widget-2" class="widget widget-job_listing widget_jmfe_widget">

    <h2 class="widget-title widget-title-job_listing %s">Amenities</h2>

    Air conditioning<br>
    Free parking<br>
    Access to bathrooms<br>
    Loading dock<br>
    Elevator<br>

</aside>

我想把这些点包装成列表项，像这样：

<aside id="jmfe_widget-2" class="widget widget-job_listing widget_jmfe_widget">

    <h2 class="widget-title widget-title-job_listing %s">Amenities</h2>

    <li>Air conditioning</li><br>
    <li>Free parking</li><br>
    <li>Access to bathrooms</li><br>
    <li>Loading dock</li><br>
    <li>Elevator</li><br>

</aside>

无论如何 jQuery 有可能吗？

Answer 1

首先，您需要将每个项目包裹在 div 中并给它一个 class，就像这样

<aside id="jmfe_widget-2" class="widget widget-job_listing widget_jmfe_widget">

    <h2 class="widget-title widget-title-job_listing %s">Amenities</h2>

    <div class="item">Air conditioning</div>
    <div class="item">Free parking</div>
    <div class="item">Access to bathrooms</div>
    <div class="item">Loading dock</div>

</aside>

然后，在 jQuery

中执行此操作

$('.item').each(function(){
   $(this).wrap('<li></li>');       
});

演示 https://jsfiddle.net/tu5u0an3/2/

如果你不能添加任何 HTML，那么试试这个

$( "#jmfe_widget-2" )
  .contents()
    .filter(function() {
      return this.nodeType === 3;
    })
  .wrap( "<li></li>" )
  .end()
.filter( "br" )
.remove();

这将查看您的 aside 元素，获取内容，删除 <br> 标签并将其替换为 <li></li>

演示版 https://jsfiddle.net/tu5u0an3/5/

Answer 2

如果你可以改变你的 html，试试这个：

HTML:

<aside id="jmfe_widget-2" class="widget widget-job_listing widget_jmfe_widget">  
    <h2 class="widget-title widget-title-job_listing %s">Amenities</h2>
    <div class="list">
        Air conditioning<br>
        Free parking<br>
        Access to bathrooms<br>
        Loading dock<br>
        Elevator
    </div> 
</aside>

jQuery:

var listHTML = $('.list').html();
var listItems = listHTML.split('<br>');
$('.list').html('');
$.each(listItems, function(i, v){
    var item = '<li>' + v + '</li>';
    $('.list').append(item);
});

工作示例：https://jsfiddle.net/tq52keg7/

如果您无法更改 html 使用此解决方案：

HTML:

<aside id="jmfe_widget-2" class="widget widget-job_listing widget_jmfe_widget">
    <h2 class="widget-title widget-title-job_listing %s">Amenities</h2>
        Air conditioning<br>
        Free parking<br>
        Access to bathrooms<br>
        Loading dock<br>
        Elevator<br>
</aside>

jQuery:

var widgetHTML = $('.widget').html();
var splitWidgetHTML = widgetHTML.split('</h2>');
var listItems = splitWidgetHTML[1].split('<br>');
var widgetTitleHTML = $('.widget').find('.widget-title');
listItems.splice(listItems.length - 1,1);

$('.widget').html('');
$('.widget').append(widgetTitleHTML);
$.each(listItems, function(i, v){
    var item = '<li>' + v.trim() + '</li>';
    $('.widget').append(item);
});

示例：https://jsfiddle.net/tq52keg7/1/

Answer 3

您应该确保将列表项添加到有序或无序列表中。下面的示例使用 vanilla JS 来获取列表元素的文本，并使用 jQuery 来简化 DOM 交互。

$(document).ready(function() {
    var container = $('#jmfe_widget-2');//Grab with jQuery, life will be easier because of it
    var content = container[0].childNodes; //This is the dom node without the jQuery wrapper, gives a clean way to grab text

    var myList;
    var myItem;
    var header;
    if (content.length) {//if children found proceed
        for (var i = 0; i < content.length; i++) {
            if (content[i].nodeName === '#text') {//This only grabs the items you want to build into a list
                if (content[i].textContent.replace(/\s/g, '').length) {//Ignores the empty lines
                    if (!myList) {
                        myList = $('<ul>').addClass('my-list'); //create list only if there are items to add
                    }

                    myItem = $('<li>')
                        .html(content[i].textContent)//Add the text
                        .addClass('my-list-item');

                    myItem.appendTo(myList);//Add item to list
                }
            }
            else if (content[i].nodeName === 'H2') {
                header = $(content[i]);//Make into a jQuery object for convenience
            }
        }
    }

    if (myList) {//if you have a list, replace the current content
        container.html(header);//Blow away the content and add the header back
        myList.appendTo(container);//Now add the symantically correct list back
    }
});

如何用 <li> 标签在每个新行中包装 HTML 文本？

How to wrap HTML text in each new line with <li> tag?

html

jquery

newline

list