开发者

Grouping list items (LIs) to OLs/ULs using jQuery

开发者 https://www.devze.com 2023-01-18 15:41 出处:网络
Is it possible, using Javascript and either jQuery or regular expressions, to group multiple sibling list items in HTML as in the example below? I need to convert TikiWiki markup to HTML, and it uses

Is it possible, using Javascript and either jQuery or regular expressions, to group multiple sibling list items in HTML as in the example below? I need to convert TikiWiki markup to HTML, and it uses ungrouped lists (just adjacent lines appended with #).

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

To this:

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

I already tried using $("li").wrapAll() and siblings(). Both failed.

There's another approach. Here's the regex I'm currently using to convert TikiWiki lists to HTML list items: replace(/[#](.*)\n?/g, "<li class='numbered'>$1</li>") Is it possible to match repeated patterns, and convert them accordingly to HTML as in this pseudo regex? replace(/repeat([#](.*)\n?)/g, "<ol>foreach(<li class='numbered'>$1</li>)&l开发者_JAVA技巧t;/ol>")


Here is my first hack at it. this might get you going in the right direction

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


The <p> is just hanging out in the middle of a bunch of <li>s, signifying the beginning or end of a group? Then maybe something like this:

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

​ Here's a working jsFiddle using this approach.

0

精彩评论

暂无评论...
验证码 换一张
取 消