jQuery Selector by data attribute not working in Safari

Question

The following show alert one and two in FF but just one in Safari. Is anything in this line incompatible in Safari? if($('div[data-foo="'+bar+'"').hasClass('baz')){

jQuery

alert('one');
if($('div[data-foo="'+bar+'"').hasClass('baz')){
    alert('two');
}else{
    alert('three');
}

HTML

<div data-foo="bar" class="baz"></div>

Answer 1

You are missing a closing bracket ]. Also, bar is a string literal in this case, not a variable. This works:

alert('one');
if($('div[data-foo="bar"]').hasClass('baz')){
    alert('two');
}else{
    alert('three');
}

Or you can define bar as a variable:

var bar = "bar";
alert('one');
if($('div[data-foo="' + bar + '"]').hasClass('baz')){
    alert('two');
}else{
    alert('three');
}

(Not sure how it was otherwise working in Firefox before.)

Answer 2

Depending upon what you want to really do where the alert statements are, you could make a shortcut with:

$('div.baz').each(function(){
  alert($(this).data('foo'));
});

This should create an alert stating bar