Фильтр jquery имеет +
Хорошо, у меня есть элементы списка, у некоторых есть диапазон, а некоторые нет.
В моем случае я хочу добавить span, когда они еще не установлены.
has() работает отлично, но not() добавляет span к обоим?
HTML:
- Как выбрать конкретный элемент формы в jQuery?
- Тестирование, если флажок установлен с помощью jQuery
- jQuery .bind () vs. .on ()
- addID в jQuery?
- Как я могу получить соответствующий заголовок таблицы (th) из ячейки таблицы (td)?
-
item
empty span -
item 2
JS:
$("a.add-span").click(function() { $("li").each(function(index) { // $(this).has("span").find("span").append(" - appended"); $(this).not("span").append('new span'); }) })
- Выберите элемент, когда имя classа начинается с определенного слова
- Есть ли jQuery-подобный CSS / HTML-селектор, который можно использовать в C #?
- Является ли jQuery каким-либо кэшированием «селекторов»?
- Как изменить css display none или заблокировать свойство с помощью JQuery?
- использовать jQuery's find () для объекта JSON
- Как я могу определить, возвращает ли селектор null?
- Изменение CSS-элемента дочернего элемента при зависании родительского элемента
- jQuery: содержит селектор для поиска нескольких строк
Вы можете использовать комбинацию : not и : имеет селектора, подобные этому
$("a.add-span").click(function() { $("li:not(:has(span))").each(function(index) { $(this).append('new span<\/span>'); }); });
Вот демонстрация http://www.jsfiddle.net/xU6fV/
$("a.add-span").click(function() { $("li").each(function(index) { if ($(this).children('span').length === 0){ $(this).append('new span<\/span>'); } }) })
С методом children() свойство length используется для проверки того, выходит ли уже span а если нет, добавляется / добавляется.
Больше информации:
Принятый ответ работает хорошо, если вы не хотите отфильтровывать только те элементы, которые имеют span качестве прямых детей.
Поскольку :has() и цикл .has() над всеми потомками, а не только дочерние.
В этом случае вам нужно использовать функцию
$("li").not(function() { // returns true for those elements with at least one span as child element return $(this).children('span').length > 0 }).each(function() { /* ... */ })
Попробуй это,
$("a.add-span").click(function() { $("li:not(:has(span))").each(function(index) { $(this).append($("").html("Newly Added Span")); }); });
Это первая ссылка на Google при поиске «jquery not have». Конкретный сценарий, который мне нужно было решить, немного отличался от этого. Я должен был not элементы, которые имеют определенный элемент DOM, а не просто на основе тега. Это означало, что я не мог использовать селектор, который использовал каждое вышеприведенное решение.
Однако jQuery has() принимает элемент DOM! Поэтому я создал плагин jQuery для объединения этих двух встроенных функций.
Я хотел поделиться им здесь, потому что, надеюсь, это поможет другим в моей ситуации. Он также отвечает на исходный вопрос.
Плагин:
(function ( $ ) { $.fn.extend({ not_has: function (param) { return this.not(this.has(param)); } }); }( jQuery ));
Реализация:
$("a.add-span").click(function() { $("li").not_has("span") .append('new span<\/span>'); // Prevent the page from navigating away return false; });
https://jsfiddle.net/brjkg10n/1/
Сначала я намеревался найти функцию jQuery, которая будет работать как addBack() но not вместо этого. Если вам нужно что-то настолько сложное, то, пожалуйста, не стесняйтесь использовать следующий плагин.
(function ( $ ) { $.fn.extend({ notBack: function () { return this.prevObject.not(this); } }); }( jQuery ));
При этом ответ будет следующим:
$("li").has("span").notBack() .append('new span<\/span>');