jQuery $.each vs for loop through object

Question

I have the following code to return a Chinese word's English translation on hover.

//return Chinese/English words from database
$("#npc_dialog span").on("mouseover", function() {
    var word = $(this).text();
    $("#currentWord").text(parseHoveredText(word));
}).on("mouseout", function() {
    $("#currentWord").empty();
});

It works with a for loop:

function parseHoveredText (word) {
    for (vocab in hoveredWords) {
        if(word.toLowerCase() === vocab) {
            return hoveredWords[vocab];
        }
    }
};

But does not if I use jQuery $.each.

function parseHoveredText (word) {
    $.each(hoveredWords, function(key, value) {
        if(word.toLowerCase() === key) {
            return value;
        }
    });
};

In both cases, the console.log() of the returned value yields the same value. Why doesn't the jQuery work?

In the for loop:

console.log(hoveredWords[vocab]); gives: You

In the jQuery $.each:

console.log(value); gives: You

Arun P Johny · Accepted Answer · 2014-02-03 07:28:14Z

3

it is because you have a anonymous function, when you return the value it is from the each callback function not from the parseHoveredText method.

function parseHoveredText (word) {
    var val;
    $.each(hoveredWords, function(key, value) {
        if(word.toLowerCase() === key) {
            val =value;
            //return false to prevent any further iterations
            return false;
        }
    });
    return val;
};

but from the looks of it, it should be as simple as

function parseHoveredText (word) {
    return hoveredWords[word.toLowerCase()];
};

answered Feb 3, 2014 at 7:28

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

2 Comments

user3871 Over a year ago

Awesome. The simplified function works perfectly. How is it that return hoveredWords[word.toLowerCase()]; is able to find the word I'm looking for? Is the loop assumed?

Arun P Johny Over a year ago

hoveredWords is a object which contains key value pairs.... so you can use member operators to fetch the value

Adil · Accepted Answer · 2014-02-03 08:53:42Z

1

The return statement in each will end the each loop instead of returning value from function. You need to return false to finish the for loop instead of returning the value. You should assign value to some variable (that is accessible out the each block) in each loop before returning from each function and return that value from function parseHoveredText

function parseHoveredText (word) {
    var result = "";
    $.each(hoveredWords, function(key, value) {
        if(word.toLowerCase() === key) {
            result = value;
            return false;
        }
    });
    return result;
};

edited Feb 3, 2014 at 8:53

answered Feb 3, 2014 at 7:27

Adil

148k25 gold badges217 silver badges207 bronze badges

1 Comment

Barmar Over a year ago

You need to return false to make the loop stop.

Collectives™ on Stack Overflow

jQuery $.each vs for loop through object

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related