Расширение jquery selector возвращает больше данных, чем должно быть

Question

Я пытаюсь расширить селектор jquery (в первый раз), и я пытаюсь получить более читаемый и поддерживаемый код для моих друзей, которые работают со мной в этом проекте.

Я пытаюсь найти все элементы, которые имеют атрибут deletable=true Поэтому, когда я смотрю на эти элементы в поджигатель, как это:

$('.wrapper[deletable="true"]') 

Я получаю правильный результат.

Но когда я пытаюсь сократить его:

$(':deletable') 

Так что я попытался расширить селектор JQuery, как это:

$.extend($.expr[':'], { 
    deletable: function(el) { 
     return $(el).find('[deletable="true"]').length > 0 
    } 
    }); 

По некоторым причинам я получаю html body mainContainer в моем результате, когда Я пробовал $(":deletable") в firebug. Я также получаю удаляемые элементы, но я получаю эти дополнительные элементы, которые мне не нужны, как элементы body/html.

Что я делаю неправильно?

Answer 1

Взгляните на то, что ваш пользовательский селектор делает:

return $(el).find('[deletable="true"]').length > 0 

Теперь вы вызываете свой собственный селектор с помощью :deletable. Это функционально эквивалентно *:deletable. Это означает, что селектор вы будете делает:

$('*').find('[deletable="true"]').length > 0 

Который найти все элементы, которые содержат элемент с атрибутом, в том числе и bodyhtml.

Answer 2

Если вы используете find, любой элемент, имеющий дочерний элемент, соответствующий селектору, вернет значение true. Похоже, что вы пытаетесь сделать это

return $(el).is('[deletable="true"]'); 

Answer 3

Ваш селектор находит все элементы, у которых есть дети, имеющие атрибут deletable="true".

Вместо этого вы можете сделать:

$.extend($.expr[':'], { 
    deletable: function(el) { 
     return $(el).is('[deletable="true"]'); // Check if this element has the attribute 
    } 
    }); 

Это будет возвращать только элементы, которые имеют атрибут.

JSFiddle Example

Answer 4

JQuery говорит тело и HTML содержат элементы, которые имеют атрибут deletable=true. Я бы проверил attr вместо find('[deletable="true"]).length, так как это учитывает все внутри каждого объекта DOM.