jquery string comparison variable

Question

I have the following code:

arr = ["abc", "def", "ghi", "jkl"]
arr2 = ["abc", "def", "ghi", "jkl"]

$(arr).each(function(){
    thiselem = this;

    $(arr2).each(function(){
        if(thiselem == "abc" && this == "abc")
            alert("case 1");
        if(thiselem == this)
            alert('case 2');
    });
});

When I run this only "case 1" pops up. Logically this statement should be true by the transitive property, so I am guessing it is some JavaScript string syntactic issue or a jQuery scope thing is messing this up. Any advice is appreciated.

Answer 1

Other posters have suggested workarounds, I'll try to answer the question why your original code doesn't work. The answer is rather non-trivial and reveals some good-to-know javascript gotchas.

jQuery.each uses apply to pass this to its callback. When apply's argument is a primitive value, like string, it will be "boxed", ie converted to an object (specifically, the String object):

console.log(typeof("cat"))  // string

logger = function() { console.log(typeof(this)) }
logger.apply("cat")  // object

Now consider the following:

a = ["abc"]
b = ["abc"]

$(a).each(function() {
   var that = this
   $(b).each(function() {
       console.log(this == that) // false!
   })
})

Although a[0] and b[0] are "obviously" equal, the == operator returns false because both are objects, and two object variables are only equal if they are physically the same object. On the other side, this works as expected:

a = ["abc"]
b = ["abc"]

$(a).each(function() {
     console.log(this == "abc") // true
     console.log(this == b[0]) // true
})

When JS compares an object to a string, the object is converted to a string primitive using toString . Since this is a String object, its toString returns the primitive string it was made of, and two primitive strings are equal if their characters are equal.

Answer 2

arr = ["abc", "def", "ghi", "jkl"]
arr2 = ["abc", "def", "ghi", "jkl"]

$(arr).each(function(index, val1) {
    $(arr2).each(function(i, val2) {
        if (val1 == "abc" && val2 == "abc") alert("case 1");
        if (val1 == val2) alert('case 2');
    });
});

Sample workout

Answer 3

Try like below,

var arr = ["abc", "def", "ghi", "jkl"]
var arr2 = ["abc", "def", "ghi", "jkl"]

$(arr).each(function(idx, el){
    $(arr2).each(function(idx, iEl){
        if(el == "abc" && iEl == "abc")
            alert("case 1");       
        if(el == iEl)
            alert('case 2');
    });
 });

Note: I assume the above is just a pseudo code. We can help better if you let us know what you are trying to do.

DEMO

Answer 4

Try this:

var arr = ["abc", "def", "ghi", "jkl"]
var arr2 = ["abc", "def", "ghi", "jkl"]

jQuery.each(arr,function(key1, val1){
  jQuery.each(arr2,function(key2, val2 ){
    if(val1 == "abc" && val2 == "abc")
        alert("case 1");       
    if(val1 == val2)
        alert('case 2');
   });
});​

Here is Demo