如何使用JQuery .each（）遍历47个div？

我基本了解.each（）如何基于jquery文档中的内容工作，但我并不真正了解如何将其应用于具有大量元素的内容。我有使用SVG制作的地图。当前地图的每个部分都在onmouseover功能上亮起。如何使用JQuery .each（）遍历47个div？

 $('.shape').mouseover(function(){ 
    // $('.shape').css({fill:#5df8b8;}) 
    shape_id = $(this).attr('id'); 
    console.log($(shape_id)); 
    $("#" + shape_id).css("fill", "#5df8b8"); 
    $('.hidden').each(function(i){ 
     //show each div on hover over 
    }); 


    }); 
    $('.shape').mouseleave(function(){ 
    console.log("you left a zip"); 
    $('.shape').css("fill", "white"); 
    $('.hidden').hide(); 
    });

我为地图的每个部分都有一个div。每个div都包含该区域的信息。我希望能够使每个div显示取决于你在地图上悬停的地方是否有比这个情况下的.each（）更好的东西？

来源

2013-05-12 cdm89

你有没有办法找出'.hidden'元素与当前徘徊的'.shape'元素相关，就像某个类，相同的索引等？ – adeneo 2013-05-12 15:27:42

@adeneo我不太确定你的意思，但每个div都有自己的id和隐藏的类。 svg元素也有相同的id，divs有 – cdm89 2013-05-12 15:40:46

@ user2302869更好的是提供一个示例HTML模板在小提琴 – exexzian 2013-05-12 15:41:50

对mouseover和mouseleave事件中元素的“this”引用指的是触发事件的div。你可以使用它而不必遍历地图中的所有div。见下面的代码。我创建了一个示例fiddle，这是一个工作示例。

<div class="transparent"><img src="https://ssl.gstatic.com/images/logos/google_logo_41.png" /></div> 
<div class="transparent"><img src="https://ssl.gstatic.com/images/logos/google_logo_41.png" /></div> 
<div class="transparent"><img src="https://ssl.gstatic.com/images/logos/google_logo_41.png" /></div> 


$("div").bind("mouseover", function(el, a){ 
$(this).removeClass("transparent") 
}) 
.bind("mouseleave", function(el, a){ 
$(this).addClass("transparent") 
})

来源

2013-05-12 19:18:53 sriniris

如何使用JQuery .each（）遍历47个div？

回答

相关问题