Back To Programming / Scripting / Coding Forum

jQuery for loop issue

  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Joined: Aug 04, 2008
  • Posts: 846
  • Status: Offline

Post October 15th, 2011, 2:52 pm

I'm trying to set up a way that I can customize the look of a dropdown menu. I'm limited in what I can do with css, so I'd like to hide the "select" element and instead show an unordered list that will work the same way:


start with this:
HTML Code: [ Select ]
<td>
   <select name="scope">
      <option value="days">Days</option>
      <option value="weeks">Weeks</option>
      <option value="months">Months</option>
      <option value="years">Years</option>
   </select>
</td>
 
  1. <td>
  2.    <select name="scope">
  3.       <option value="days">Days</option>
  4.       <option value="weeks">Weeks</option>
  5.       <option value="months">Months</option>
  6.       <option value="years">Years</option>
  7.    </select>
  8. </td>
  9.  


use javascript to do this:
HTML Code: [ Select ]
<td>
   <select name="scope" style="display: none;">
      <option value="days">Days</option>
      <option value="weeks">Weeks</option>
      <option value="months">Months</option>
      <option value="years">Years</option>
   </select>
   <ul>
      <li>Days</li>
      <li>Weeks</li>
      <li>Months</li>
      <li>Years</li>
   </ul>
</td>
 
  1. <td>
  2.    <select name="scope" style="display: none;">
  3.       <option value="days">Days</option>
  4.       <option value="weeks">Weeks</option>
  5.       <option value="months">Months</option>
  6.       <option value="years">Years</option>
  7.    </select>
  8.    <ul>
  9.       <li>Days</li>
  10.       <li>Weeks</li>
  11.       <li>Months</li>
  12.       <li>Years</li>
  13.    </ul>
  14. </td>
  15.  


What I'm getting instead is this:
HTML Code: [ Select ]
<td>
   <select name="scope" style="display: none;">
      <option value="days">Days</option>
      <option value="weeks">Weeks</option>
      <option value="months">Months</option>
      <option value="years">Years</option>
   </select>
   <ul>
      <li>Days</li>
      <li></li>
      <li>Weeks</li>
      <li></li>
      <li>Months</li>
      <li></li>
      <li>Years</li>
      <li></li>
   </ul>
</td>
 
  1. <td>
  2.    <select name="scope" style="display: none;">
  3.       <option value="days">Days</option>
  4.       <option value="weeks">Weeks</option>
  5.       <option value="months">Months</option>
  6.       <option value="years">Years</option>
  7.    </select>
  8.    <ul>
  9.       <li>Days</li>
  10.       <li></li>
  11.       <li>Weeks</li>
  12.       <li></li>
  13.       <li>Months</li>
  14.       <li></li>
  15.       <li>Years</li>
  16.       <li></li>
  17.    </ul>
  18. </td>
  19.  


Here's the javascript code I'm using:
JAVASCRIPT Code: [ Select ]
 
$("select")
   .css({
      display  : "none",
   })
   .parent()
   .append( function(index, html) {
      var opts = $(this).children('select').children('option');
      var ar = "";
      for(i=0;i<opts.length;i++){
         ar = ar+"<li>"+$(opts[i]).text()+"<li>";
      }
      ar = "<ul>"+ar+"</ul>";
      return ar;
   })
   .children("select")
   .children('option')
   .first()
   .attr("selected","selected");
 
  1.  
  2. $("select")
  3.    .css({
  4.       display  : "none",
  5.    })
  6.    .parent()
  7.    .append( function(index, html) {
  8.       var opts = $(this).children('select').children('option');
  9.       var ar = "";
  10.       for(i=0;i<opts.length;i++){
  11.          ar = ar+"<li>"+$(opts[i]).text()+"<li>";
  12.       }
  13.       ar = "<ul>"+ar+"</ul>";
  14.       return ar;
  15.    })
  16.    .children("select")
  17.    .children('option')
  18.    .first()
  19.    .attr("selected","selected");
  20.  


I realize it's not the cleanest code in the world...javascript isn't my strong-suit. I'm sure the amount of selectors and DOM traversal I'm doing will make people cringe...but, I'd like to know where I'm going wrong with my for loop. Why am I getting extra empty list-items?
Use your words like arrows to shoot toward your goal.
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post October 15th, 2011, 2:52 pm

  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Joined: Aug 04, 2008
  • Posts: 846
  • Status: Offline

Post October 15th, 2011, 3:55 pm

I found a solution by using jQuery.each method rather than a for loop. Looks kind of messy, how would you guys clean it up?

JAVASCRIPT Code: [ Select ]
$("select").each(function(index, element) {
   $(this).after("<ul>").after( function() {
     
      var opts = $(this).children('option');
     
      opts.each(function(){
         $(this).parent().parent().children("ul").first().append("<li>"+$(this).text()+"</li>");
         console.log(this);
      });
   })
   .children("select")
   .children('option')
   .first()
   .attr("selected","selected");
});
 
  1. $("select").each(function(index, element) {
  2.    $(this).after("<ul>").after( function() {
  3.      
  4.       var opts = $(this).children('option');
  5.      
  6.       opts.each(function(){
  7.          $(this).parent().parent().children("ul").first().append("<li>"+$(this).text()+"</li>");
  8.          console.log(this);
  9.       });
  10.    })
  11.    .children("select")
  12.    .children('option')
  13.    .first()
  14.    .attr("selected","selected");
  15. });
  16.  
Use your words like arrows to shoot toward your goal.
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Joined: Dec 20, 2002
  • Posts: 8925
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Offline

Post October 16th, 2011, 9:50 am

In your first post you had this line causing your extra li elements:

Code: [ Select ]
ar = ar+"<li>"+$(opts[i]).text()+"<li>";


Your second li element there is not a closing li, you forgot your /. That is all your problem was I believe :)
Ozzu Hosting - Want your website on a fast server like Ozzu?
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Joined: Aug 04, 2008
  • Posts: 846
  • Status: Offline

Post October 16th, 2011, 3:32 pm

You sir, are a gentleman and a scholar. Thank you.
Use your words like arrows to shoot toward your goal.

Page 1 of 1

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: No registered users and 224 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.