javascript - name - selectores jquery avanzados

jQuery selector reutilizar las mejores prácticas

Question

Al almacenar un objeto DOM como una variable, que es el mejor uso de la práctica de esa variable:

// Option 1

var myElement1 = $(".container").find(''ul li:eq(1)'');
$(myElement1).css(''background'', ''red'');


// Option 2

var myElement2 = $(".container").find(''ul li:eq(2)'');
myElement2.css(''background'', ''blue'');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="container">
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
   </ul>
 </div>

Parece que lo he visto en ambos sentidos, y como puede ver, ambos hacen el trabajo. Las opciones 1 me parecen un poco redundantes, pero solo quería comprobar antes de asignar la Opción 2 a mi estilo personal.

Answer 1

La segunda opción es completamente válida y una buena práctica, sin embargo, la primera no tiene sentido. Está intentando jQueryify un objeto que ya ha sido jQueryified. Básicamente es algo así como $($("body")) .

También tenga en cuenta que es una buena práctica anteponer $ a las variables que contienen el objeto jQuery. Tu código debería verse así:

var $myElement2 = $(".container").find(''ul li:eq(2)'');
$myElement2.css(''background'', ''blue'');

Como escribió @Terry, la forma más optimizada sería:

var $c = $(".container ul li");
var $second = $c.eq(2);

Answer 2

Tienes razón, el primer caso es redundante, y en realidad lleva más tiempo ejecutarlo (aunque no por mucho)

Puedes ver esto en el fragmento aquí:

var s = window.performance.now();

var myElement1 = $(".container").find(''ul li:eq(1)'');
$(myElement1).css(''background'', ''red'');

var e = window.performance.now();
console.log(e - s);

s = window.performance.now();

var myElement2 = $(".container").find(''ul li:eq(2)'');
myElement2.css(''background'', ''blue'');

e = window.performance.now();
console.log(e - s);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
</div>

Me está dando una diferencia de velocidad de 2 a 3 milisegundos.

Me quedaría con la segunda opción ya que es más limpia y más rápida.