Question

假设我有以下标记：

<ul>
    <li class="one"></li>
    <li class="one"></li>
    <li class="one"></li>
</ul>

我将下面的jquery添加到perfprm onclick函数：

$(".one").click(function(){
        var text = this.innerHTML;
        alert(text);

    })

点击功能分配给所有三个li元素。 usualy在javascript document.getElementsByClassName("one").myprop中会返回第一个带有类名one的属性myprop的元素。同样，如果我向document.getElementsByClassName("one")添加一个事件监听器，该事件将附加到具有类名one的第一个元素。例如。

var one = document.getElementsByClassName("one");  
one.addEventListener("click", function(){
  alert();
});

会在单击第一个li元素时显示警告poup。

类似地，jquery应该只将函数分配给类名为one的第一个元素。

那么jquery如何为具有类名one的所有元素分配函数？

Answer 1

那么jquery如何为所有带有类的元素分配一个函数一个名字？

原始选择器是传递给jQuery()

的所有".one"元素的集合

在上面列出的第一个表述中，jQuery() - 也可以是写作$() - 在DOM中搜索任何元素与提供的选择器匹配并创建一个新的jQuery对象引用这些元素：
$( "div.foo" );

强调添加在＆＃34; 任何＆＃34;。

.one()来电.on()

function one(types, selector, data, fn) {
    return this.on(types, selector, data, fn, 1);
}

调用.each()将事件附加到原始选择器$(".one")

的每个元素

return this.each(function () {
    jQuery.event.add(this, types, fn, data, selector);
});

Answer 2

取自MDN，

Javascript＆＃39; getElementsByClassName＆＃39;返回一个类似于数组的对象具有所有给定类名的所有子元素。

所以，你实际上不会得到一个结果。您的示例中几乎相同，$('.one')只是做同样的事情。

要获取返回元素的第一个元素，可以使用;

var $jQueryObject = $('.one').eq(0);
//
var domElem = $('.one').get(0);

因此，如果您只想将事件处理程序分配给第一个，您可以这样做;

$(".one").eq(0).click(function(){
    var text = this.innerHTML;
    alert(text);
})

Answer 3

在jQuery中，您可以使用:nth-child(0)或:eq(1)指向第一堂课。在内部，它将所有元素作为列表获取，然后当您提供(0)时，它意味着index=0。如果:nth-child()索引从0开始，而:eq()索引从1开始。

JavaScript getElementsByClassName做同样的事情。

示例：

$("button").click(function() {
  //alert($(".one:nth-child(1)").text());
  alert($(".one:eq(0)").text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul>
  <li class="one">A</li>
  <li class="one">B</li>
  <li class="one">C</li>
</ul>

<button>Click</button>

Answer 4

getElementsByClassName（）方法返回文档中具有指定类名的所有元素的集合，作为NodeList对象。

NodeList对象表示节点的集合。可以通过索引号访问节点。指数从0.te开始

get(0)将解决您的问题。

get（）方法获取选择器指定的DOM元素。

有关详细信息，请参阅question。

另见doc

$('.one').get(0).click(function()
{
    var text = this.innerHTML;
    alert(text);
})

Answer 5

根据您的要求＆＃34; jquery应该只将函数分配给类名为1的第一个元素＆＃34;这里的代码可以提供一些帮助。

<script>
    $(function(){
        $("li.one:first-child").on("click",function(){
        /*Your actions go here*/
        var text =$(this).html();
         alert(text);
        });
    });

如何使用jquery选择器将事件添加到多个元素？

5 个答案: