Разница между селектором jquery от String и domElement

Question

Недавно я нашел какой-то странный код в своем проекте. Он работает хорошо, однако я не понимаю, почему они используют этот способ.

$($('#' +targetDiv)[0]) 

Является ли это ошибка или какая-либо другая причина, чтобы использовать этот способ вместо использования $ («#» + targetDiv)?

Кажется, что и селектор указывает тот же элемент dom.

спасибо.

Answer 1

Разница заключается в том, что $($(selector)[0]) представляет собой объект JQuery, содержащий только первый матч, в то время как $(selector) является объектом JQuery, который может возможно содержит больше, чем просто первый матч.

Иными словами, $(selector)[0] будет извлекать первый элемент DOM в объекте jQuery. Обертка элемента DOM с помощью $() вернет объект jQuery. С другой стороны, $(selector) будет получать все совпадения (которые может быть больше, чем только первое совпадение).

Лучший способ переписать $($(selector)[0]) будет $(selector).eq(0).

Например:

$($('.example1')[0]).css('background-color', '#f00'); 
 

 
$('.example2').css('background-color', '#0f0'); 
 

 
$('.example3').eq(0).css('background-color', '#00f');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<p class="example1">$($('.example1')[0])</p> 
 
<p class="example1">$($('.example1')[0])</p> 
 
<p class="example1">$($('.example1')[0])</p> 
 
<hr /> 
 
<p class="example2">$('.example2')</p> 
 
<p class="example2">$('.example2')</p> 
 
<p class="example2">$('.example2')</p> 
 
<hr /> 
 
<p class="example3">$('.example3').eq(0)</p> 
 
<p class="example3">$('.example3').eq(0)</p> 
 
<p class="example3">$('.example3').eq(0)</p>

Answer 2

В соответствии с jQuery documentation, объект JQuery принимает следующие объекты в его перегрузках:

селекторных
элемент
elementArray
объект
выбор
HTML

Все они производят действительные объекты JQuery и полезны в различных ситуациях. Тем не менее, в вашем случае, это выглядит, как кто-то просто не знает, как это сделать:

$('#' +targetDiv).eq(0) 

Это может быть хорошей идеей, чтобы изменить этот код, чтобы не запутать кого-то в будущем. Более того, это решение может оказать негативное влияние на производительность.