CODEWITHSUNDEEP
javascriptjquery
Robert Gouveia
Robert Gouveia

Reputation: 19

trouble getting all menu > li in jquery

Hi guys i have a few navigations on 1 page which look like this:

<div class="menu">
 <ul>
  <li>link here</li>
 <li>Link Here</li>
</div>

I have 2 or 3 on one page.

I am trouble making them go into a select and options box in jquery.

It works 100% if i only have 1 on a page but because i have 2 or 3 of them on a page sometimes it only inputs the first menu into all dropdown select boxes.

Here is the jquery:

jQuery("<select />").appendTo(".menu");
    jQuery("<option />", {"selected": "selected","value"   : "","text" : "Navigation Menu"}).appendTo(".menu select");
    jQuery(".menu ul li a").each(function() {

        var el = jQuery(this);
        jQuery("<option />", {"value"   : el.attr("href"),"text"    : el.text()}).appendTo(".menu select");
    });

    jQuery(".menu select").change(function() {

        window.location = jQuery(this).find("option:selected").val();
    });

I know its meant to look something like this but its just throwing errors.

jQuery("<select />").appendTo(".menu");
    jQuery("<option />", {"selected": "selected","value"   : "","text" : "Navigation Menu"}).appendTo(".menu select");

    var showlis = 'ul li a';
    jQuery(this + showlis).each(function() {

        var el = jQuery(this);
        jQuery("<option />", {"value"   : el.attr("href"),"text"    : el.text()}).appendTo(".menu select");
    });

    jQuery(".menu select").change(function() {

        window.location = jQuery(this).find("option:selected").val();
    });

Upvotes: 0

Views: 345

Answers (3)

Travesty3
Travesty3

Reputation: 14469

A few things I notice:

  1. Not sure if it's just a copy-paste error, but in your navigation menu, you don't have a closing <ul> tag. This is invalid HTML.
  2. This is likely your problem. You are appending your new <select /> tag to an element found with the jQuery selector .menu. That selector matches all elements with the menu class. It doesn't know which element with the menu class that you're trying to append it to, so it probably just appends it to the first one every time. You will need to narrow down your selector. The best way to do this would probably be to give each navigation <div> an id attribute and use that as your selector.
  3. I'm very confused as to why you would want to do this at all. You already have the list for your navigation, why are you trying to put dropdowns in there as well?

Upvotes: 0

techfoobar
techfoobar

Reputation: 66663

You need to refer to each .menu item individually instead of referring to it via the class alone.

What the code below does is:

For each .menu in your DOM (page)

  1. Create and append a <select> onto it
  2. Add a default <option> element
  3. Loop through the <li>s and a corresponding <option> inside the <select>

Demo: http://jsfiddle.net/5dm37/

Code:

$('.menu').each(function() {
    var menu = $(this);
    var sel = $("<select />").appendTo(menu);
    $("<option />", {
        "selected": "selected",
        "value": "",
        "text": "Navigation Menu"
    }).appendTo(sel);
    menu.find('li').each(function() {
        $("<option />", {
            "value": $(this).attr("href"),
            "text": $(this).text()
        }).appendTo(sel);
    });
    sel.change(function() {
        alert($(this).val());    
    });
});

Upvotes: 3

jholloman
jholloman

Reputation: 1979

All of the jQuery manipulation functions outside of clone move elements.

http://api.jquery.com/category/Manipulation/?rdfrom=http%3A%2F%2Fdocs.jquery.com%2Fmw%2Findex.php%3Ftitle%3DManipulation%26redirect%3Dno

This means that for each menu class div you need to create a new element. Creating one element will append it to the first menu class div.

EX:

$(".menu").each( function(index, element) {
    //Create select and options here
    $(element).append(SELECT);
});

Upvotes: 0

Related Questions