运行each（），但仅应用于第一个结果

Question

如何将第一个p变成红色？

我正在使用each()因为我需要搜索所有的P。 但是我只希望代码仅对第一个结果起作用，之后或类似的情况下“退出”。

我该如何使用jQuery？

PS：这是一个简单的示例，代码比这更复杂，所以请不要建议$('p').eq(0)或CSS方式...我需要在jQuery运行时执行此操作每种方法。

谢谢。

http://jsfiddle.net/ybr2qh46/

<p>name 1</p>
<p>name 2</p>
<p>name 3</p>

(function($){
    $('p').each( function(){
    $(this).css( 'color', 'red');
  });
})(jQuery)

Answer 1

您可以return false ，以阻止循环继续到下一个元素：

 (function($){ $('p').each( function(){ $(this).css( 'color', 'red'); return false; }); })(jQuery) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p>name 1</p> <p>name 2</p> <p>name 3</p> 

另一个选择-如果您希望循环继续（但仍只希望更改第一个元素）-您可以检查该元素是否是第一个：

 (function($){ $('p').each( function(i) { if (i == 0) { $(this).css( 'color', 'red'); } }); })(jQuery) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p>name 1</p> <p>name 2</p> <p>name 3</p> 

Answer 2

您可以尝试使用.first()方法。 如果有一个或多个选择器，则用于选择第一个选择器。

 $('p').first().css( 'color', 'red'); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p>name 1</p> <p>name 2</p> <p>name 3</p> 

---

另一个选项（ 必须使用每种方法 ）：

 var item = Array.from($('p').each(function (){}))[0]; $(item).css('color', 'red'); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p>name 1</p> <p>name 2</p> <p>name 3</p>