• 0

jQuery - add <SPAN> inside each <LI>


Question

+Dick Montage

OK, here's what I'm trying to do:

1) Find each <LI> within an <OL> or <UL> within a <DIV> with the class "entry"...

2) Wrap the contents of the <LI> with <SPAN> tags...

So:

<UL>

<LI>Item1</<LI>

<LI>Item2</<LI>

</UL>

becomes:

<UL>

<LI><SPAN>Item1</SPAN></<LI>

<LI><SPAN>Item2</SPAN></<LI>

</UL>

-------------

Maybe I'm going about this wrong, so I will post the high-level overview of what I'm attempting to achieve...

1) I am working on post entries in my wordpress blog

2) The editor just puts content within the <LI> and no way to force it to add the <SPAN> (nor would I want to always remember).

3) The colour of a bullet comes from the colour of the bulletted text

4) So to have a bullet with a different colour, the <SPAN> is necessary.

Cheers

Link to post
Share on other sites

2 answers to this question

Recommended Posts

  • 0
DomZ

I think this does what you want:

$("div.entry ul&gt;li").wrapInner("&lt;span&gt;&lt;/span&gt;");

// This should do it for both types, but I'm not great with jquery selectors...

$("div.entry ul,ol&gt;li").wrapInner("&lt;span&gt;&lt;/span&gt;");

And the same for ol, li - or have I misunderstood?

edit: I just edited it, found the wrapInner method

Link to post
Share on other sites
  • 0
+Dick Montage

Thank you sir, the correct usage was:

$("div.entry ul>li,ol>li").wrapInner("<span></span>");

:)

Link to post
Share on other sites
This topic is now closed to further replies.
  • Recently Browsing   0 members

    No registered users viewing this page.