why just the first element in <ul> could responded to query function?

Question

guys.I am now using web.py +jQuery to finish a small website.However I encountered a problem.The example code as blow.When I created a group of li elements,the jQuery event only responded to the first element.But others never call the jQuery function.Why it happened?Many thinks:)

html&python

<ul id="products" style="list-style:none;">
    $for item in data.response["Galleries"]:
     <li style="float:left" id="photoLink">
      <a href="$item['PhotoUrl']">
        <img src=$item["PhotoUrl"] alt="加载失败" style="max-width:75px;max-height:75px" title="点击查看大图"/>
         </a>
        <div id="img_menu" style="height:20px;width:75px;background-color:black;opacity:0.5"/>
     </li>
</ul>

jQuery

<script type="text/javascript">
$$(document).ready(function(){
  $$("#photoLink").mouseenter(function(){
    $$("#img_menu").css("margin-top","-20px");
  });

  $$("#photoLink").mouseleave(function(){
    $$("#img_menu").css("margin-top","0px");
  });
});
</script>

Answer 1

In HTML IDs must be unique, use class instead like

<ul id="products" style="list-style:none;">
    $for item in data.response["Galleries"]:
     <li style="float:left" class="photoLink">
      <a href="$item['PhotoUrl']">
        <img src=$item["PhotoUrl"] alt="加载失败" style="max-width:75px;max-height:75px" title="点击查看大图"/>
         </a>
        <div class="img_menu" style="height:20px;width:75px;background-color:black;opacity:0.5"/>
     </li>
</ul>

jQuery

<script type="text/javascript">
$$(document).ready(function(){
  $$(".photoLink").mouseenter(function(){
    $$(this).find(".img_menu").css("margin-top","-20px");
  });

  $$(".photoLink").mouseleave(function(){
    $$(this).find(".img_menu").css("margin-top","0px");
  });
});
</script>

Additionally You can use .hover()

<script type="text/javascript">
$$(document).ready(function(){
  $$(".photoLink").hover(function(){
    $$(this).find(".img_menu").css("margin-top","-20px");
  }, function(){
    $$(this).find(".img_menu").css("margin-top","0px");
  });
});
</script>

Answer 2

Id can't no be duplicate on the page. They must be unique. If there are same multiple Ids presents on the page, selector selects only the first one. So you need to use class selector instead of Id.

<li style="float:left" class ="photoLink">
      <a href="$item['PhotoUrl']">
        <img src=$item["PhotoUrl"] alt="加载失败" style="max-width:75px;max-height:75px" title="点击查看大图"/>
         </a>
        <div class="img_menu" style="height:20px;width:75px;background-color:black;opacity:0.5"/>
</li>

jQuery

<script type="text/javascript">
$$(document).ready(function(){
  $$(".photoLink").mouseenter(function(){
    $$(this).find(".img_menu").css("margin-top","-20px");
  });

  $$("#photoLink").mouseleave(function(){
    $$(this).find(".img_menu").css("margin-top","0px");
  });
});
</script>

Answer 3

Because ID of ane element mus be unique, use class instead

<ul id="products" style="list-style:none;">
    $for item in data.response["Galleries"]:
     <li style="float:left" class="photoLink">
      <a href="$item['PhotoUrl']">
        <img src=$item["PhotoUrl"] alt="加载失败" style="max-width:75px;max-height:75px" title="点击查看大图"/>
         </a>
        <div class="img_menu" style="height:20px;width:75px;background-color:black;opacity:0.5"/>
     </li>
</ul>

then you need to target the img_menu element which is inside the current li

$$(function ($) {
    $(".photoLink").hover(function () {
        $(this).find(".img_menu").css("margin-top", "-20px");
    }, function () {
        $(this).find(".img_menu").css("margin-top", "0px");
    });
});