Question

是否可以使用Javascript和jQuery或正则表达式对HTML中的多个兄弟列表项进行分组，如下例所示？我需要将TikiWiki标记转换为HTML，它使用未分组的列表（只是附加了＃的相邻行）。

<li>Item 1.1</li>
<li>Item 1.2</li>
<li>Item 1.3</li>
<p>Paragraph</p>
<li>Item 2.1</li>
<li>Item 2.2</li>

对此：

<ul>
<li>Item 1.1</li>
<li>Item 1.2</li>
<li>Item 1.3</li>
</ul>
<p>Paragraph</p>
<ul>
<li>Item 2.1</li>
<li>Item 2.2</li>
</ul>

我已尝试使用$("li").wrapAll()和siblings()。都失败了。

还有另一种方法。这是我正在使用的正则表达式将TikiWiki列表转换为HTML列表项：replace(/[#](.*)\n?/g, "<li class='numbered'>$1</li>")是否可以匹配重复的模式，并将它们相应地转换为HTML，如此伪正则表达式？ replace(/repeat([#](.*)\n?)/g, "<ol>foreach(<li class='numbered'>$1</li>)</ol>")

Answer 1

这是我的第一次破解。这可能会让你朝着正确的方向前进

    <div id='testList'>
        <li>Item 1.1</li>
        <li>Item 1.2</li>
        <li>Item 1.3</li>
        <p>Paragraph</p>
        <li>Item 2.1</li>
        <li>Item 2.2</li>

    </div>

<script language='javascript' type='text/javascript'>

$.fn.tagName = function() {
    return this.get(0).tagName;
}

$(document).ready(function() {

    alert($("#testList").html());

    $("li").each(function() {
        if ( $(this).parent().tagName() != "UL" ) {
            $(this).wrap("<ul></ul>");
            // alert($(this).parent().tagName())
        }
    })

    alert($("#testList").html());
});
</script>

Answer 2

<p>只是悬挂在一堆<li>s的中间，表示群组的开头或结尾？那么也许是这样的：

$('div#container') // assume you're got it in a container div
  .find('p').each( function(){ // each p signifies a new group
    $(this)
      .prev('li') // walk back to the preceding li
      .prevUntil('p') // get the set of elements up to the previous p
      .andSelf() // include the current li
      .wrapAll('<ul>'); // wrap the set in a ul
   });

这是使用这种方法的working jsFiddle。

使用jQuery将列表项（LI）分组到OL / UL

2 个答案: