Question

如何将事件限制为jQuery集合中的单个元素？

在下面的例子中，我尝试使用.one()来限制行为（将<li class='close'>Close</li> HTML行插入）到单个实例。行为确实只发生过一次，但是在$( "ul>li>a" )的每个匹配元素上。如何只对集合中的一个匹配元素进行一次？

有什么想法吗？

$( "ul>li>a" ).one(
 "click",    
 function(){
  $( "ul ul")
  .prepend("<li class='close'>Close</li>")
 }
 );

提前致谢。

-AS

Answer 1

jQuery选择返回一个数组。因此$("selection")[0]可以发挥作用。但是，有更好的抽象方法，如.get(0)或.first()（如果您正在寻找选择/数组的第一个元素）。

$（“selection”）。get（index）返回选择的纯DOM元素（在该特定索引处），并且 not 包装在jQuery中对象

$（“selection”）。first（）返回选择的第一个元素，在jQuery对象中包装。

因此，如果您不必返回第一个元素，但仍需要jQuery功能，则可以执行$($("selection").get(index))。

鉴于你的情况，这应该可以正常工作：

// bind the 'onclick' event only on the first element of the selection
$( "ul>li>a" ).first().click(function() {
    $( "ul ul").prepend("<li class='close'>Close</li>");
});

这相当于：

$($( "ul>li>a" ).get(0)).click(function() {
    $( "ul ul").prepend("<li class='close'>Close</li>");
});

而且：

$($( "ul>li>a" )[0]).click(function() {
    $( "ul ul").prepend("<li class='close'>Close</li>");
});

我必须不同意Ryan，使用CSS选择字符串来过滤结果与原生JavaScript数组功能相比相当昂贵。

Answer 2

尝试first()，它会选择第一个元素：

$( "ul>li>a" ).first().one('click',    
     function(){
        $( "ul ul").prepend("<li class='close'>Close</li>")
     }
 );

正如您已经注意到的，

one()仅用于处理一次的事件。

Answer 3

您必须指定要使用的元素的索引。

如果您的选择器返回多个元素，您可以执行以下操作之一... 你可以通过在html中为它们提供class或id属性来隔离你的元素，并改变选择器以仅选择你想要选择的元素的类/ id，或者你可以指定你想要的元素的索引。与...合作。后一种方法有点草率但只要您的页面结构不会改变就会起作用。

因此，对于我所说的第一种方法，在将一个类/ id应用于元素之后，你将选择器更改为：

$("ul>li>a.class")
or
$("ul>li>a#id")

对于我提到的第二种方法，你要将选择器更改为：

$("ul>li>a:eq(index)")

其中index是您尝试选择的元素的从零开始的索引。

Answer 4

您可以调用first方法，该方法将返回一个新的jQuery对象，该对象仅包含原始元素中的第一个元素。

但是，在您的情况下，您也可以使用（等效的）:first选择器，如下所示：

$("ul > li > a:first").click(function() { ... });

如果您只想处理第一个click事件并忽略后续点击，则需要使用.one()，就像您现在一样。

Answer 5

您需要将first（）与one（）结合使用：

$( "ul>li>a" ).first().one('click', function () {});

更一般：

$( "ul>li>a:eq(n)" ).one('click', function () {});

只选择jQuery集合中的一个元素

5 个答案: