绑定一个具有相同类的元素的孩子的事件

Question

我想绑定一个特定类的所有秒元素的点击事件，我正在使用;

$("ul.message-list-row > li:eq(1) > div").click(function(){...}); 

不幸的是，它不起作用。我也尝试过，没有“>”，但没有运气。

我的代码中有7个相同的UL。所以，

console.log($("ul.message-list-row").length); 

回报7，但

console.log($("ul.message-list-row > li:eq(1)").length); 

回报1.不应该是7呢？什么是错误？

我使用的方式试图在下面的标记：

<ul class="message-list-row rounded-corners"> 
    <li> 
     <img src="Public/CSS/Images/sample-app-icon-02.png" alt="" title="" /> 
     <span class="app-name">AppName</span> 
     <span class="version">V3.1</span> 
     <div class="apple">OS V. - 5.04</div> 
    </li> 
    <li> 
     <div> 
      <span>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</span> 
     </div> 
    </li> 
    <li> 
     <div class="progress-bar" title="70"></div> 
     <span>%70</span> 
    </li> 
    <li class="number">7643</li> 
    <li class="completed">&nbsp;</li> 
    <li>&nbsp;</li> 
    <li> 
     <ul> 
      <li>Language:</li> 
      <li> 
       <img src="Public/CSS/Images/flag-uk.png" alt="" title="" /> 
       English 
      </li> 

      <li>Operator:</li> 
      <li>Operator</li> 

      <li>Country:</li> 
      <li> 
       <img src="Public/CSS/Images/flag-tr.png" alt="" title="" /> 
       Country 
      </li> 

      <li>Badge:</li> 
      <li>Clean</li> 
     </ul> 
    </li> 
</ul> 


<ul class="message-list-row rounded-corners"> 
    <li> 
     <img src="Public/CSS/Images/sample-app-icon-03.png" alt="" title="" /> 
     <span class="app-name">AppName</span> 
     <span class="version">V3.1</span> 
     <div class="apple">OS V. - 5.04</div> 
    </li> 
    <li> 
     <div> 
      <span>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</span> 
     </div> 
    <li> 
     <div class="progress-bar" title="0"></div> 
     <span>%0</span> 
    </li> 
    <li class="date">00:22:58</li> 
    <li class="waiting">&nbsp;</li> 
    <li> 
     <a class="settings-button" href=""></a> 
     <a class="approve-button action-button" href=""></a> 
     <a class="cancel-button action-button" href=""></a> 
    </li> 
    <li> 
     <ul> 
      <li>Language:</li> 
      <li> 
       <img src="Public/CSS/Images/flag-uk.png" alt="" title="" /> 
       English 
      </li> 

      <li>Operator:</li> 
      <li>Operator</li> 

      <li>Country:</li> 
      <li> 
       <img src="Public/CSS/Images/flag-tr.png" alt="" title="" /> 
       Country 
      </li> 

      <li>Badge:</li> 
      <li>Clean</li> 
     </ul> 
    </li> 
</ul> 

Answer 1

:eq()不像您认为的那样工作。使用:nth-child(2)而不是:eq(1)。

:nth-child选择器获取作为其父项的第n个子项的jQuery集合中的每个元素。 :eq选择器只会在jQuery集合中获得一个元素，即“nth”（0索引）元素。

http://jsfiddle.net/mattball/xhYaP/