JQuery фильтрации имеет + не

Question

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

has() работает нормально, но not() добавляет интервал к обоим ??

HTML:

<ul>
    <li>
        <p>item</p>
        <span class="spn">empty span</span>
    </li>
    <li>
        <p>item 2</p>
    </li>
<ul>
<hr>
<a class="add-span"href="#">check</a>

JS:

$("a.add-span").click(function() {
    $("li").each(function(index) {
        // $(this).has("span").find("span").append(" - appended");
        $(this).not("span").append('<span class="spn">new span<\/span>');
    })    
})

Answer 1

Вы можете использовать комбинацию : не и : имеет селекторов, подобных этому

$("a.add-span").click(function() {
    $("li:not(:has(span))").each(function(index) {
        $(this).append('<span class="spn">new span<\/span>');
    });
});

Вот демоверсия http://www.jsfiddle.net/xU6fV/

Answer 2

$("a.add-span").click(function() {
    $("li").each(function(index) {
       if ($(this).children('span').length === 0){
         $(this).append('<span class="spn">new span<\/span>');
       }
    })    
})

При использовании метода children() свойство length используется для проверки, существует ли или нет span, и если нет, добавляется / добавляется один.

Подробнее:

• http://api.jquery.com/length/
• http://api.jquery.com/children/

Answer 3

Это первая ссылка в Google при поиске "jquery not has". Конкретный сценарий, который мне нужно было решить, немного отличался от этого. Мне пришлось not элементов, которые имеют определенный элемент DOM, а не просто на основе тега. Это означало, что я не мог использовать селектор, который использовался в каждом решении выше.

jQuery's 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('<span class="spn">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('<span class="spn">new span<\/span>');

https://jsfiddle.net/2g08gjj8/1/

Answer 4

Принятый ответ работает хорошо, если вы не хотите отфильтровывать только те элементы, у которых span s являются прямыми дочерними элементами.

В качестве циклов :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() { /* ... */ })

Answer 5

Попробуйте это,

$("a.add-span").click(function() {
    $("li:not(:has(span))").each(function(index) {
        $(this).append($("<span class='spn'>").html("Newly Added Span"));
    });
});