Question

How do I loop through a clone list using jquery?

     <ul id=testList>
          <li><p> Test A </p></li>
          <li><p> Test B </p></li>
          <li><p> Test C </p></li>
          <li><p> Test D </p></li>
          <li><p> Test E </p></li>
     </ul>

jquery code…

         var $cloneList = $("#testList").clone();

         $cloneList.each(function()
         {
              alert($(this).html());
         });

The problem is the output of the alert method displays the content of the list:

             <p> Test A </p>

What I need is the display of the ul list like this

            <li><p> Test A </p></li>

Answer 1

Well what you’re trying to iterate is a list of li elements. Each of which contains some html ("<p>text</p>“).

The quickest way is to use outerHTML given the scenario you described:

$cloneList.find('li').each(function(){
alert(this.outerHTML);
});

However it might be prudent to post a larger scope of the problem since it appears that perhaps the result of .clone() is not exactly what you’re wanting to work with.