CODEWITHSUNDEEP
jqueryhtmljquery-uijquery-selectors
minh
minh

Reputation: 69

Replace each tag p by tag li and around group li by tag ul

Here html :

<section class="category">
        <p><a href="product-list.html">Lorem ipsum dolor sed diam</a></p>
        <p><a href="product-list.html">Lorem ipsum dolor sed diam</a></p>
        <p><a href="product-list.html">Lorem ipsum dolor sed diam</a></p>
        <p><a href="product-list.html">Lorem ipsum dolor sed diam</a></p>
      <section class="clear"></section>
    </section>

How to replace tag p --> li and wrap group li by tag ul . I need it to be :

   <section class="category">
      <ul>
        <li><a href="product-list.html">Lorem ipsum dolor sed diam</a></li>
        <li><a href="product-list.html">Lorem ipsum dolor sed diam</a></li>
        <li><a href="product-list.html">Lorem ipsum dolor sed diam</a></li>
        <li><a href="product-list.html" >Lorem ipsum dolor sed diam</a></li>
      </ul>
      <section class="clear"></section>
</section>

Upvotes: 1

Views: 1203

Answers (3)

jmishra
jmishra

Reputation: 2081

In your jQuery do this

    $("p").each(function () {
 $(this).replaceWith("<li>" + $(this).html() + "</li>");
  });

Upvotes: 0

Diode
Diode

Reputation: 25145

you can use a combination of

http://api.jquery.com/replaceWith/

and

http://api.jquery.com/wrapAll/

$(".category p").wrapAll("<ul>").replaceWith(function() {
    return $("<li></li>").append($(this).html());
});

Upvotes: 2

silly
silly

Reputation: 7887

jQuery('.category').each(function(){
    var c = jQuery(this);
    var ul = jQuery('<ul/>');
    c.find('p').each(function(){
        var p = jQuery(this);
        ul.append(jQuery('<li/>').append(p.children()));
    }).remove();
    c.prepend(ul);        
});

Upvotes: 0

Related Questions