Поиск элементов без дочерних элементов

#jquery #html #dom #jquery-selectors

#jquery #HTML #dom #jquery-селекторы

Вопрос:

Моя цель: изменить фон элемента при наведении курсора на элемент.

Проблема: у меня есть * селектор, который добавляет mouseover/mouseout эффект ко всем элементам. Однако мне нужно только изменить фон самого глубокого элемента, на который я наведу курсор, то есть элемента без дочерних элементов.

HTML:

 <body>
    <div id="skinke" niveau="1">
        <img niveau="2" class="hest" id="dyr" src="http://upload.wikimedia.org/wikipedia/commons/d/db/Patern_test.jpg" />
    </div>
    <div class="bil hest" niveau="1">
        <p niveau="2">Asdnjkewr</p>
    </div>
    <ul niveau="1">
        <li class="aefae" niveau="2">
            <p id="bold" niveau="3">1. sdfsdf</p>
        </li>
        <li niveau="2">
            <p id="to" niveau="3">fiweorew</p> <---- I want only the <p> tag to change background
        </li>
        <li>
            <p class="re">werwerw</p>
        </li>
        <li>
            <p>wreer</p>
        </li>
    </ul>
</body>

Чтобы уточнить, я добавил комментарий выше, чтобы помочь понять.

1. Редко бывает хорошей идеей использовать все для синтаксического анализа. Создайте список элементов, к которым вам нужно прикрепить функцию. $('.one-thing, .another .thing, .a > p')...

2. Как насчет нацеливания на элементы без дочерних элементов ( :empty )? api.jquery.com/empty-selector

3. Проблема @isherwood в том, что я хочу, чтобы это было обобщением. Я хочу использовать в разрешить элемент, который представляет значение, которое он хочет.

4. @GriffeyDog Возможно, вы правы! Я был неправ в своем первом комментарии.

5. @GriffeyDog Ты прав! Это правильный ответ.

Ответ №1:

Вы можете использовать делегирование событий и привязать обработчик щелчков к document вместо привязки обработчика к каждому элементу. (это также имеет дополнительное преимущество работы с динамически добавляемыми элементами.)

Селектор :empty, упомянутый в комментариях, не будет работать с такими элементами, как <h1> , <p> и т.д. из-за textNodes . Вместо этого вы можете использовать метод use the children() для проверки наличия реальных дочерних элементов следующим образом:

 $(document).on('mouseenter','*',function(){
 if(!$(this).children().length)
   $(this).addClass('highlight');
});
$(document).on('mouseleave','*',function(){
 if($(this).hasClass('highlight'))
   $(this).removeClass('highlight');
});

CSS

 .highlight{
  background-color:dodgerblue;
}

ДЕМОНСТРАЦИЯ

Ответ №2:

Для этого вы можете использовать jQuery:

 $(elementBeingHovered).hover(function() {
    $(elementToChange).css("background-color", "red");
});

Или если вы наводите курсор на тот же элемент, который хотите изменить:

 #to:hover {
    background-color: red;
}

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

2. В приведенном выше примере используется наведение курсора мыши? Если вы хотите, чтобы при наведении курсора на ВСЕ остальные элементы изменялся только один элемент, вы все равно можете использовать приведенный выше jQuery, просто используйте $(«*») в качестве селектора; хотя, как уже говорили другие люди, это, как правило, не очень хорошая практика.

Ответ №3:

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

Метод .contents() возвращает все дочерние элементы, включая textNodes (nodeType=3). Цикл while останавливается, когда есть только дочерние элементы textnode.

 $(function() {
    $('*').hover(function() {
        var that = $(this);
        while( that.contents().filter(function() { return this.nodeType == 1; }).length > 0 ) {
            that = that.contents().filter(function() { return this.nodeType == 1; });
        };
        that.css('backgroundColor', 'red');
    });
});

ДЕМОНСТРАЦИЯ JSFIDDLE

Я надеюсь, что это поможет вам достичь вашей цели.