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

如果你可以改变你的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 2

首先，您需要将每个项目包装在div中并给它一个类，如此

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

DEMO 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>

DEMO https://jsfiddle.net/tu5u0an3/5/

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文本？

3 个答案: