jQuery - loop through each element

Question

I have a script that transforms selected option from the dropdown list into a link.

Each dropdown is contained inside <li> – and there can be unlimited duplicates added through my script, so it makes kind of difficult to give each <li> an id-selector.

HTML:

<ul class="mylist">
    <li>
        <select>
            <option value="http://google.com">Google</option>
            <option value="http://twitter.com">Twitter</option>
        </select>
    </li>
</ul>

Part of my script that is responsible for adding more duplicates and transforming dropdown list into link.

$(document).keydown(function (e) {
    var key = e.which;
    if(key == 107) {
        $('.mylist').append("<li><select><option value='http://google.com'>Google</option><option value='http://twitter.com'>Twitter</option></select></li>");
    }
});

$("button").click(function () {
    var which = $("select").val();
    var text = $('select option:selected').html();
    $("select").replaceWith("<a href='" + which + "'>" + text + "</a>");
});

I need to change my script so it transforms EACH dropdown <select> into EACH selected value, because now it transforms EVERY dropdown into the first dropdown's value. How do I do that if I have no id-selectors, since unlimited duplicates may be added?

Raidri · Accepted Answer · 2015-07-09 09:38:23Z

2

Use jQuery.each():

$("button").click(function () {
    $("select").each(function() {
        var value = $(this).val();
        var text = $(this).find('option:selected').html();
        $(this).replaceWith("<a href='" + value + "'>" + text + "</a>");
    });
});

answered Jul 9, 2015 at 9:38

Raidri

17.7k11 gold badges69 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kamal Pundir Over a year ago

This should will work fine. Just keep in mind this will convert all the <select> on the page, not only <select> inside #mylist . I will recommend to use more specific selector may be some thing like $('#mylist li select') Thanks.

Albert Over a year ago

Thank you for the solution! And thanks to Kamal for the note.

meskobalazs · Accepted Answer · 2015-07-09 09:38:39Z

1

Use the .each() function.

$("select").each(function (index, value) {
    // ...
});

answered Jul 9, 2015 at 9:38

meskobalazs

16.1k2 gold badges44 silver badges63 bronze badges

Comments

oshell · Accepted Answer · 2015-07-09 09:56:16Z

1

Allthough jQuery is providing an each function it is relatively slow compared to the native javascript for loop and you should avoid using it. Native for loop is up to 100x times faster. You can use the native function and eq() to get certain elements within the loop.

var select = $("select");
$("button").click(function () {
    for (var i = 0; i < select.length; i++) {
        var value = select.eq(i).val();
        var text = select.eq(i).find('option:selected').html();
        select.eq(i).replaceWith("<a href='" + value + "'>" + text + "</a>");
    });
});

edited Jul 9, 2015 at 9:56

answered Jul 9, 2015 at 9:50

oshell

9,1511 gold badge31 silver badges50 bronze badges

Comments

Jeffers · Accepted Answer · 2015-07-09 10:52:37Z

The answer is simple enough, but there's a lot of ways to optimize this.

So assuming $("button") refers to some button that occurs later (you should give it an ID or class and reference that btw), you can do this:

//Document ready adds closure
$(document).ready(function () {
    var $mylist = $('.mylist');
    //Place event handler on body or even $mylist to reduce polling processing (compared to entire document)
    //Use 'keyup' instead of 'keydown' since it won't fire continuously if held down
    $('body').on('keyup', function (e) {
        var template = $('<li><select><option value="http://google.com">Google</option><option value="http://twitter.com">Twitter</option></select></li>');
        //If key pressed is '+' symbol - 107 is keypad '+', 187 is keyboard '+'
        if(e.which === 107 || e.which === 187) {
            //Since $('.mylist') is the never-changing container, it's better to cache the variable globally and reference it on every keypress
            $mylist.append(template);
        }
    });

    $('button').on('click', function () {
        $("select").each(function (index, el) {
            //.children() is a little bit less intensive than .find()
            var $select = $(el),
                $selectedOption = $select.children('option:selected'),
                selectedValue = $selectedOption.val(),
                selectedText = $selectedOption.text(),
                replacementLink = $('<a href="' + selectedValue + '">' + selectedText + '</a>');

            //Replace select with link
            $select.replaceWith(replacementLink);
        });
    });
});

It's better to use .text() than .html() for the selected option text in this instance because it cuts down on XSS vulnerabilities (stops potential user input reflection), and grabbing attributes from the cached variable is a little better for performance.

One more thing: if you are going to add any event handling to the selects themselves, you'll need to do it 'live' like this to account for selects that get added later:

$mylist.on('change', 'select', function (changeEvent) {
    //whatever
});

Good luck dude!

This replaces the selected option, not the whole select element.
That's not what he wanted? Haha right - thanks for pointing that out - fixed.

Collectives™ on Stack Overflow

jQuery - loop through each element

4 Answers 4

2 Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related