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

I have multiple elements with same name: Call now

我有多个具有相同名称的元素:立即致电

When i apply below .each then alert only works for the first element and not for each element having: id="call-me"

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

What am I doing wrong in it?

我做错了什么?

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

3 个解决方案

#1

You can't use the same id on more than one element; it's an invalid DOM. $("#call-me") will only locate one of them, because jQuery will optimize that into a call to getElementById, which can only return one (usually the first, but as it's an invalid DOM, the browser could pick any).

您不能在多个元素上使用相同的ID;这是一个无效的DOM。 $(“#call-me”)只能找到其中一个,因为jQuery会优化调用getElementById,它只返回一个(通常是第一个,但因为它是一个无效的DOM,浏览器可以选择任何一个) 。

Instead, group them in some other way, perhaps via class.

相反,可以通过课程以其他方式对它们进行分组。

Separately: There's no reason to use each there. Just use click directly on the set you get back:

另外:没有理由在那里使用它们。只需直接点击你回来的套装即可:

$(".call-me").click(function() {
    alert("Test");
});

If you need to know which one was clicked, this refers to the specific clicked element.

如果您需要知道单击了哪一个,则指的是特定的单击元素。

Example using class:

使用类的示例:

$(document).ready(function() {
  $('.call-me').click(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>

#2

An id should be unique. Instead, use

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

class="cal-me"

and for the jquery

而对于jquery

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

#3

@TJCrowder has correctly pointed out that using a class is the way to go. However, you do not need to use .each(), unless you want to see all the three when the page loads or in response to some other event. Here is how to do it without each:

@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>

UPDATE To display text from the div.hidemynumber that's after div.call-me use:

更新要显示div.call-me之后使用的div.hidemynumber中的文本:

$('.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>

A much better approach might be to place your number in a data attribute as follows:

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

    $('.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>

#1