Question

我有多个同名的元素：立即致电

当我在下面申请.each然后警报只适用于第一个元素，而不适用于每个元素：id =“call-me”

我做错了什么？

$(document).ready(function(){
    $('#call-me').each(function() {
        $(this).click(function() {
            alert("Test");
        });
    });
});

Answer 1

您不能在多个元素上使用相同的id;它是一个无效的DOM。 $("#call-me")只会找到一个，因为jQuery会将其优化为对getElementById的调用，class只能返回一个（通常是第一个，但是它是＆＃39;是一个无效的DOM，浏览器可以选择任何一个。）

相反，可以通过each以其他方式对它们进行分组。

另外：没有理由在那里使用click。只需在你回来的套装上直接使用$(".call-me").click(function() { alert("Test"); });：

this

如果您需要知道点击了哪一个，class会引用特定的点击元素。

使用$(document).ready(function() { $('.call-me').click(function() { alert($(this).text()); }); });的示例：

＆＃13;

<div class="call-me">First</div>
<div class="call-me">Second</div>
<div class="call-me">Third</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

＆＃13;

html
  head
    style
      include style.css

＆＃13;

Answer 2

id应该是唯一的。相反，使用

class="cal-me"

和jquery

$('.call-me').each...

Answer 3

@TJCrowder已正确指出使用类是可行的方法。但是，您不需要使用.each()，除非您希望在页面加载或响应某些其他事件时看到所有这三个。以下是没有各自的方法：

$(document).ready(function() {
    //all you really need
    $('.call-me').on('click', function() {
        alert($(this).text());
    });
  
    /*//but if you must see the three alerts when the page loads then you do need each()
    $('.call-me').each(function() {
        alert( $(this).text() );
    });*/
});

<div class="call-me">First</div>
<div class="call-me">Second</div>
<div class="call-me">Third</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<强>更新要显示使用div.hidemynumber之后div.call-me的文字：

$('.call-me').on('click', function() {
    alert( $(this).next('.hidemynumber').text() );
});

.hidemynumber {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="call-me">First</div> <div class="hidemynumber">1234</div> <div class="call-me">Second</div> <div class="hidemynumber">8855</div> <div class="call-me">Third</div> <div class="hidemynumber">7411</div>

更好的方法可能是将您的号码放在数据属性中，如下所示：

    $('.call-me').on( 'click', function() {
        alert( $(this).data( 'hidemynumber' ) );
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="call-me" data-hidemynumber="1234">First</div>  <div class="call-me" data-hidemynumber="8855">Second</div>  <div class="call-me" data-hidemynumber="7411">Third</div>

.each（）jquery不适用于所有元素

3 个答案: