Использование jQuery для выбора элементов с атрибутами данных присваивает нулевой идентификатор его родительским элементам

Question

Это действительно странно. Если я использую jQuery .find() для поиска дочерних элементов, которые имеют атрибуты данных во время события прокрутки, прокрутка страницы будет многократно добавлять и удалять идентификатор для родителей этих элементов.

Это трудно описать, но вот воспроизводимый тест: http://jsfiddle.net/8fouvx9p/

var groups = $(".group"); 
 

 
$(window).bind("scroll resize orientationchange", function() { 
 
    showGroup(); 
 
}); 
 
       
 
function showGroup() { 
 
    $(groups).each(function() { 
 
    var group = $(this), 
 
     elements = $(group).find("[data-animation]"); 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="group"> 
 
    <div data-animation="test" class="test">Test</div> 
 
    <p data-animation="test" class="test">Test</p> 
 
    <span data-animation="test" class="test">Test</span> 
 
</div> 
 
<div class="group"> 
 
    <div data-animation="test" class="test">Test</div> 
 
    <p data-animation="test" class="test">Test</p> 
 
    <span data-animation="test" class="test">Test</span> 
 
</div> 
 
<div class="group"> 
 
    <div data-animation="test" class="test">Test</div> 
 
    <p data-animation="test" class="test">Test</p> 
 
    <span data-animation="test" class="test">Test</span> 
 
</div> 
 
<div class="group"> 
 
    <div data-animation="test" class="test">Test</div> 
 
    <p data-animation="test" class="test">Test</p> 
 
    <span data-animation="test" class="test">Test</span> 
 
</div> 
 
<div class="group"> 
 
    <div data-animation="test" class="test">Test</div> 
 
    <p data-animation="test" class="test">Test</p> 
 
    <span data-animation="test" class="test">Test</span> 
 
</div> 
 
<div class="group"> 
 
    <div data-animation="test" class="test">Test</div> 
 
    <p data-animation="test" class="test">Test</p> 
 
    <span data-animation="test" class="test">Test</span> 
 
</div> 
 
<div class="group"> 
 
    <div data-animation="test" class="test">Test</div> 
 
    <p data-animation="test" class="test">Test</p> 
 
    <span data-animation="test" class="test">Test</span> 
 
</div> 
 
<div class="group"> 
 
    <div data-animation="test" class="test">Test</div> 
 
    <p data-animation="test" class="test">Test</p> 
 
    <span data-animation="test" class="test">Test</span> 
 
</div> 
 
<div class="group"> 
 
    <div data-animation="test" class="test">Test</div> 
 
    <p data-animation="test" class="test">Test</p> 
 
    <span data-animation="test" class="test">Test</span> 
 
</div>

Убедитесь, что предварительный просмотр достаточно того, что есть пространство для прокрутки мало, то проверьте один из «теста «элементы и прокрутка вверх и вниз. Вы увидите, что в Firefox, он добавляет и удаляет идентификатор null для тестовых элементов при прокрутке:

В Safari, это происходит менее последовательно - но когда это произойдет, идентификатор начнет с sizzle.

Если я изменю .find("[data-animation]") на .find(".test"), этого не произойдет.

С учетом sizzle ID, который иногда появляется в Safari, я предполагаю, что это связано с ошибкой в ​​Sizzle (движке селектора jQuery), а не с тем, что я делаю неправильно в своем собственном коде?

Answer 1

Похоже, что создание этих пустых идентификаторов - это то, что происходит только в Firefox. Но у всех браузеров, которые я проверил, похоже, что-то подобное происходит, будь то менее заметным. В Chrome и Opera вы можете увидеть активное изменение у родителя div, без какого-либо конечного результата. В IE это очень тонко, ничего не заметно в дереве DOM, но в окне стиля все еще есть легкое мерцание. Указывая, что он отвечает на одно и то же.

Когда я вырыл вокруг немного эти цитаты из документации JQuery об аргументах, которые могут быть переданы методу .find(), казалось, держать лучший ключ:

Строка, содержащая выражение выбора для соответствия элементов против ,

Элемент или объект jQuery для соответствия элементам против.

https://api.jquery.com/find/

Я интерпретировал это как вы не можете напрямую передавать атрибут данных, но вместо этого подход должен быть фильтровать себя элементы, которые содержат его. Исправление было бы довольно простым. Culprite:

.find("[data-animation]"); 

И окружив его в объект JQuery делает функциональность работы:

.find($("[data-animation]")); 

Это на самом деле решить эту проблему, но предположение было неверным. Использование атрибута data должно квалифицироваться как выражение выбора. OP должен чувствовать себя свободно, чтобы принять другой ответ, если это может дать полное объяснение эффекта, который этот запрос имеет для родителя.До сих пор я только заметил следующее:

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

это последнее довольно сложно, так как оба метода очень похожи. Но прочесывая документацию, я нашел разницу, только .find() имеет selector context, и это, похоже, находится в ее основе.

Вот странный пример, где на body появляется нулевой идентификатор, если контекст установлен в том, что:

Demo

И вообще исчезает, когда второй параметр опущен ...

---

Рабочий пример исходного кода, включая некоторые другие мелкие хитрости:

Pen

var groups = $('.group'); 

$(window).on('scroll resize orientationchange', showGroup); 

function showGroup() { 

    groups.each(function() { 

    var group = $(this), 
    elements = group.find($('[data-animation]')); 
    }); 
}