Как избежать двойного поиска объектов jQuery

Question

Я работаю над фрагментом кода наведения jQuery, который добавит разметку при наведении и затем будет работать с классом.Вот JS.

$('.port-item').hover(function(){
        var $this = $(this);
        var name = $($this.find("img")).attr('title');
        $this.append('<div class="port-item-cover"><h3>' + name + '</h3><div>');
        $($this.children(".port-item-cover")).fadeIn();
    }, function(){
        $($(this).children(".port-item-cover")).fadeOut();
});

Разметка HTML довольно проста:

<div class="port-item">
   <a href="/portfolio/#/<?=$p['shortname']?>">
      <img src="images/portfolio/p_<?=$p['shortname']?>0.jpg" title="<?=$p['title']?>">
   </a>
</div> 

Два вопроса: главный из них - как избежать двойного поиска в jquery $($(this).children("#element"))посмотреть дочерние элементы внутри текущей области?Во второй функции это довольно уродливо, есть ли лучший способ?

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

Answer 1

1. Все методы обхода jQuery уже возвращают объекты jQuery; вам никогда не нужно писать $($this.children()).

2. номер

   а. Mouseleave никогда не должен срабатывать без мыши.

   б. Если нет подходящих элементов, ничего не произойдет; вы не получите сообщение об ошибке.

Однако вам нужно удалить элемент после окончания анимации; сейчас вы добавляете отдельный элемент при каждом наведении.

Обратите внимание, что вы упростите свой mouseenter до

$('<div class="port-item-cover"><h3>' + name + '</h3><div>')
    .appendTo(this)
    .fadeIn();

Answer 2

Первое легко. Вам не нужен внешний $ звонок. .find() уже вернет объект jQuery. Просто напишите это так

$(this).children("#element")

Что касается обнаружения, если он был наведен ранее, вам нужно было бы установить флаг где-нибудь. Это может выглядеть так:

var hoveredOver = false;
$('.port-item').hover(function(){
    hoveredOver = true;
    //continue event handler
}

Возможно, вам придется с этим смириться в зависимости от ваших конкретных обстоятельств. Возможно, установка флага с помощью .data() была бы лучше, если бы вы зависали над многими вещами.

$('.port-item').hover(function(){
    $(this).data('hoveredOver', true);
    //continue event handler
}

РЕДАКТИРОВАТЬ Пропустил вопрос там. Третий ответ: чтобы узнать, существует ли уже объект DOM (разметка), вы ищете его и проверяете длину следующим образом:

if($(this).find('#port-item-cover').length>0)
{
    //element exists
}
else
{
    //element does not exist, add it
}

Answer 3

Для первого вопроса используйте это вместо:

$(this).children("#element")