Using Appendto And Php

[_mnml]

I've been trying to append an element to the bottom of another using jquery; however, it does not work.

 

Here is my code:

 

<?php 
$currentPath = $this->getCurrentPath();
$currentCategory = Mage::registry('current_category');
?>
<script type="text/Javascript">
 jQuery(document).ready(function(){
  $(".childnav").appendTo(".catalognav");
 });
</script>
<ul class="catalognav">


   <?php foreach ($this->getCategories() as $category): ?>
 <li>
     <a<?php if ($currentCategory->getId() == $category->getId()): ?> class="selected" <?php endif ?> href="<?php echo $category->getUrl() ?>"><?php echo $category->getName() ?></a>
 </li>
 <li><span>/</span></li>
 <?php if ($currentCategory->getId() == $category->getId() || in_array($category->getId(), $currentPath)): ?>
  <ul class="childnav">
      <?php foreach ($this->getSubcategories($category->getId()) as $subcategory): ?>
          <li><a<?php if ($currentCategory->getId() == $subcategory->getId()): ?> class="selected" <?php endif ?> href="<?php echo $subcategory->getUrl() ?>"><?php echo $subcategory->getName() ?></a></li>
          <li><span>/</span></li>
      <?php endforeach ?>
  </ul>
 <?php endif ?>
   <?php endforeach ?>
</ul>

 

Basically nothing happens.

 

What I get is this:

 

<ul class="catalognav">
   <li>
       <a class="selected" href="#">Tops /</a>
   </li>
   <ul class="childnav">
       <li><a href="#">Shirts /</a></li>
       <li><a href="#">Sweaters /</a></li>
       <li><a href="#">Tees /</a></li>
       <li><a href="#">Hoodies and Sweatshirts /</a></li>
   </ul>
   <li>
       <a href="#">Denim /</a>
   </li>
   <li>
       <a href="#">Outerwear /</a>
   </li>
</ul>

 

What I want is:

 

<ul class="catalognav">
   <li>
       <a class="selected" href="#">Tops /</a>
   </li>
   <li>
       <a href="#">Denim /</a>
   </li>
   <li>
       <a href="#">Outerwear /</a>
   </li>
   <ul class="childnav">
       <li><a href="#">Shirts /</a></li>
       <li><a href="#">Sweaters /</a></li>
       <li><a href="#">Tees /</a></li>
       <li><a href="#">Hoodies and Sweatshirts /</a></li>
   </ul>
</ul>

 

Hopefully that made sense. Thanks for any help in advanced!

[codefossa]

$(".catalognav").append($(".childnav"));

[kicken]

Just as an FYI, the "what I want" code you have is invalid HTML.  Your child <ul> needs to be inside one of the parent's <li> tags, eg:

<ul class="catalognav">
        <li>
                <a class="selected" href="#">Tops /</a>
        </li>
        <li>
                <a href="#">Denim /</a>
        </li>
        <li>
                <a href="#">Outerwear /</a>
            <ul class="childnav">
                    <li><a href="#">Shirts /</a></li>
                    <li><a href="#">Sweaters /</a></li>
                    <li><a href="#">Tees /</a></li>
                    <li><a href="#">Hoodies and Sweatshirts /</a></li>
            </ul>
        </li>
</ul>