Question

I want to append to an unordered list based on what the URL is. So if I am at mysite.com/es/instructions it appends “seleccionar” to the top of the unordered list and if I am at mysite.com/instructions it append “Select” to the top of the unordered list.

Here is what I started with and works fine:

$("ul.gallery").prepend('<li class="gallery-item"><a href="#">Select</a></li>'); 

Here is where I try to append based on the url:

$(function(){
var url = location.pathname;
if(url.indexOf('es') > -1){
    $("ul.gallery").prepend('<li class="gallery-item"><a href="#">Selecctioner</a></li>');
 } 
 else if (url.indexOf('') > -1) { 
   $("ul.gallery").prepend('<li class="gallery-item"><a href="#">Select</a></li>'); 
 }  
});

Any thoughts on why this isn’t working. I even put in an alert instead of the prepend statement to see if it worked and it did.

Here is the HTML:

<ul id="gallery-1" class="gallery list columns_3 ">
 <li class="gallery-item"> <a href="/instructions_en.pdf" title="English" class="gallery-icon"> English </a></li>
 <li class="gallery-item"> <a href="/instructions_en.pdf" title="French" class="gallery-icon"> Spanish </a></li>
 <li class="gallery-item gallery-endcol"> <a href="/instructions_en.pdf" title="German" class="gallery-icon"> German </a></li>
</ul>

What is supposed to happen is that the jquery script adds “Select” or “Selecctioner” to the top of the list depending on what URL they are on.

Answer 1

Ok, my original script is working, my problem was that I had script above it that was turning my list into a drop down box. I had to move that code to the end so it was being ran last. It works. Here is the code that changes it to a drop down that I needed to move to the end, FYI:

$(document).ready(function(){

var $listItems = $('.gallery li');
var $select = $("<select id='new-menu'>");

$.each($listItems, function(idx,obj){
  var $option = $("<option>"+ $(obj).text() +"</option>").val( $(obj).find('a').attr('href') );
  if ( $(obj).hasClass('active') ){
    $option.attr('selected', 'selected');
  }
  $select.append($option);
})

$('.gallery').after($select);
$('.gallery').remove();

// Go to page on select.

$('#new-menu').change(function(){
  var selected = $(this).find('option:selected');
  //alert('Going to: '+ selected.val());
  window.location.href = selected.val();
});


});