Phương thức jQuery .each() không hoạt động trong Firefox

Question

Tôi có một phương pháp mà tôi đang sử dụng để khởi chạy chú giải công cụ có liên quan đến <td> nó tồn tại bên trong. Tất cả mọi thứ hoạt động tốt trong IE, Chrome, Safari, nhưng Firefox là hoàn toàn mất tích từng phương pháp, và tung ra chỉ tooltip cuối cùng trong DOM.

Điều gì mang lại?

http://jsfiddle.net/yus5b/

HTML:

<div class="stage"> 
    <div class="dealFinder"> 
     <h2 class="title">Deal Finder in Your Area</h2> 
     <table cellpadding="5"> 
      <tr> 
      <td class="text"> 
       <p class="makeModel"><a href="#">2012 Land Rover Range Rover Evoque</a><br>in Oak Lawn</p> 
      <a class="youSave" href="#" onclick="return false"> You Save at Least $14,810</a> 
      <div class="tooltip"> 
       <div class="inner"> 
       <b>2012 Land Rover Range Rover Evoque</b> 
       <span>Your Price $19,330</span> 
       <p>The National Average is <b>$21,500</b></p> 
       </div> 
      </div> 
      </td> 
      <td class="pic"> 
       <a href="#"><img src="http://placehold.it/113x75" /></a> 
      </td> 
     </tr> 
     <tr> 
      <td class="text"> 
      <p class="makeModel"><a href="#">2012 Land Rover Range Rover Evoque</a><br>in Oak Lawn</p> 
      <a class="youSave" href="#" onclick="return false"> You Save at Least $14,810</a> 
      <div class="tooltip"> 
       <div class="inner"> 
       <b>2012 Land Rover Range Rover Evoque</b> 
       <span><small>Your Price</small> $19,330</span> 
       <p>The National Average is <b>$21,500</b></p> 
       </div> 
      </div> 
      </td> 
      <td class="pic"> 
      <a href="#"><img src="http://placehold.it/113x75" /></a> 
      </td> 
     </tr> 
     </table> 
    </div><!-- .dealFinder --> 
</div>​ 

jQuery:

$(document).ready(function() { 
    // Tooltip 
    $('.tooltip').hide(); 
    $('.text').each(function(e) { 
     var self = this; 
     var tooltip = $(self).find('.tooltip'); 
     var youSave = $(self).find('.youSave'); 
     $(youSave).mouseenter(function(e) { 
     $(self).find(tooltip).fadeIn("slow"); 
     }); 
     $(youSave).mouseleave(function(e) { 
     $(self).find(tooltip).fadeOut("fast"); 
     }); 
    }); 
});​ 

Answer 1

để bắt đầu nó được viết lạ. Thử:

$('.text .youSave').mouseenter(function(){ 
    var item = $(this); 
    var tooltip = $('.tooltip', item.parent()).fadeIn(); 
}); 

//the same way for mouseleave 

và hiển thị chú giải công cụ: không theo mặc định tại sao lại thay đổi bằng j?

Tôi thấy sự cố. Chú giải công cụ fadein nơi con chuột của bạn và sự kiện lửa đó phối hợp. Dễ sửa chữa. Tooltip phải là .youSave phần tử con:

<a class="youSave" href="#" onclick="return false"><span> You Save at Least $14,810<span> 
<div class="tooltip"> 
        <div class="inner"> 
        <b>2012 Land Rover Range Rover Evoque</b> 
        <span>Your Price $19,330</span> 
        <p>The Web2Carz National Average is <b>$21,500</b></p> 
        </div> 
</a> 

và sau đó JS:

$('.text .youSave').mouseenter(function(){ 
    var item = $(this); 
    var tooltip = $('.tooltip', item).fadeIn(); 
}); 

Answer 2

Có thực sự gần như không bao giờ phải là một nhu cầu cho một mỗi chức năng để lặp qua các yếu tố chỉ để ràng buộc họ phải xử lý sự kiện :

$(document).ready(function() { 
    $('.tooltip').hide(); 
    $('.youSave', '.text').on('mouseenter mouseleave', function() { 
     $(this).next('.tooltip').fadeToggle('slow'); 
    }); 
});​ 

FIDDLE

Phần còn lại chỉ là vấn đề về vị trí khi đặt chú giải công cụ ở đầu nút và phải có thể sửa được bằng một chút CSS.