[jQuery] jQuery newbie is looking for a hint. (dynamically add div tags to html :: plugin accordion)

[hagbardceline]

Hi

I'm a total newbie to jQuery and need a hint.
I have a site that has a structure like this which is used for
accordion plugin:
(html content is set by TinyMC RTE Editor)

<div class="modAccordion">
  <h3>header 1</h3>
   <p>some text</p>
   <p>some other text</p>
  <h3>header 2</h3>
   <p>some text</p>
   <ul>
     <li>list element 1</li>
     <li>list element 2</li>
   </ul>
  <h3>header 3</h3>
   <p>some text</p>
   <p>some other text</p>
   <p>some more text</p>
   <p>some different text</p>
</div>

In order to make it work properly i need to add div tags. The
structure should then look like this:


<div class="modAccordion">
  <h3>header 1</h3>
   <div>
     <p>some text</p>
     <p>some other text</p>
   </div>
  <h3>header 2</h3>
   <div>
    <p>some text</p>
    <ul>
      <li>list element 1</li>
      <li>list element 2</li>
    </ul>
   </div>
  <h3>header 3</h3>
   <div>
   <p>some text</p>
   <p>some other text</p>
   <p>some more text</p>
   <p>some different text</p>
  </div>
</div>

So inside the modAccordion div container I need to add div tags.
The logic is:

After each closing h3 tag (</h3>) inside modAccordion container append
an opening div (<div>) tag.
Before every opening h3 tag (<h3>) but not before the first opening h3
tag add a closing div (</div>) tag.
Finally before the closing div tag from the modAccordion container,
add a closing div (</div>) tag.
That should make modAccordion work propperly.

I was playing around with some jQuery code (Sorry, I'm really a
beginner, it's the first time I'm using jQuery).
My trying so far, just to see how the code works and will output
(alert):

<script type="text/javascript">
        $(document).ready(function(){
        alert(getAllBetween("h3","h3"));
        alert($("h3").nextAll().not("h3").text());
        alert($("h3").nextAll().not("h3").html());
        alert($("h3").next().not("h3").html());
        alert($("h3").next().not("h3").text());
    });

                function getAllBetween(firstEl,lastEl) {
                    var firstElement = $(firstEl); // First Element
                    var lastElement = $(lastEl); // Last Element
                    var collection = new Array(); // Collection of Elements
                    collection.push(firstElement); // Add First Element to
Collection
                    $(firstEl).nextAll().each(function(){ // Traverse all 
siblings
                        var siblingID  = $(this).attr("id"); // Get Sibling ID
                        if (siblingID != $(lastElement).attr("id")) { // If Sib 
is
not LastElement
                                collection.push($(this)); // Add Sibling to
Collection
                        } else { // Else, if Sib is LastElement
                                return false; // Break Loop
                        }
                    });
                    return collection; // Return Collection
                }


        $(function() {
                $(".modAccordion").accordion();
        });
        </script>

I'm thankfull for any hint which approach I should/ could use, also
sample code would be appreciated.

Thanks in advance!

hagbard