Pytanie Jak można wykryć, czy element html może dołączać węzły potomne?


Stworzyłem niestandardowe zdarzenie jquery o nazwie "ładowanie" w mojej aplikacji. Chcę dodać element maskujący za pomocą pokrętła, gdy to zdarzenie zostanie wyzwolone. Mogę wymyślić tę część bez problemów. Jednak niektóre elementy (obrazy, dane wejściowe itp.) Nie mogą dołączać elementów potomnych. Muszę być w stanie wykryć, czy cel tego zdarzenia może odbierać elementy potomne. Jeśli nie, dodam spinner & mask do jego elementu nadrzędnego.


12
2018-06-22 18:17


pochodzenie




Odpowiedzi:


Musisz sprawdzić nazwę:

/*global $, jQuery */

function isVoid(el) {
    var tags = ['area', 'base', 'br', 'col', 'command', 'embed', 'hr', 'img', 'input',
                 'keygen', 'link', 'meta', 'param', 'source', 'track', 'wbr'],
        i = 0,
        l,
        name;

    if (el instanceof jQuery) {
        el = el[0];
    }

    name = el.nodeName.toLowerCase();

    for (i = 0, l = tags.length; i < l; i += 1) {
        if (tags[i] === name) {
            return true;
        }
    }
    return false;
}

I użyj tego tak:

var el = document.getElementById('el'),
    elj = $('#el');

if (!isVoid(el)) {
    // append
}

5
2018-06-22 18:38



indexOf nie jest krzyżową przeglądarką dla tablic: developer.mozilla.org/en/JavaScript/Reference/Global_Objects/... - Joe
Użyj _.indexOf, jeśli wspierasz IE8 i starsze - jasssonpet
Miły. Może warto dodać '#text' na wypadek, gdyby węzeł tekstowy znalazł się w środku.
Nie obsługujemy IE7 ani poniżej. Czy indexOf nie działa poprawnie w IE8? - demersus
Tylko IE 9+, możesz użyć podobnej funkcji underscorejs.org/docs/underscore.html#section-47 - jasssonpet


ty mogą dodaj elementy potomne, po prostu nie będą renderować. Może to brzmieć jak rozróżnienie semantyczne, ale ma kluczowe znaczenie dla twojego problemu: DOM tego nie robi wiedzieć czy dany znacznik jest renderowany czy nie.

Najlepiej po prostu sprawdzić instrukcję:

var allowChildren = function(elem) {
   return ! (elem.nodeName in { INPUT : true, IMG : true }) ;
};

1
2018-06-22 18:23



Nigdy nie widziałem tej składni boolowskiej. Czy to jest ważne? Więc przypuszczam, że mógłbym wyszukać specyfikację dla pustych elementów i dodać go do tego skrótu. - demersus
Myślę, że stworzenie tabeli pustych elementów będzie jedynym prawdziwym rozwiązaniem. Chociaż zakładam, że masz na myśli return !{ input : true, img : true }[elem.nodeName]
jsfiddle.net/mblase75/eGyRH/3 - Chrome pozwala mi dodać element podrzędny do <input> tag, nawet jeśli w ogóle nie jest wyświetlany. Jest widoczny w debuggerze DOM, ale nie w oknie przeglądarki. - Blazemonger
@NikPetersen - nie, to był literówka. - Malvolio
@amnotiam - przepraszam, moje zmiany nie "wzięły" z jakiegoś powodu. Ponownie je zastosowałem. - Malvolio


http://jsfiddle.net/mblase75/eGyRH/3/ - Chrome pozwala mi dodać element podrzędny do <input> tag, nawet jeśli w ogóle nie jest wyświetlany. Jest widoczny w debuggerze DOM, ale nie w oknie przeglądarki.

Mogę jednak to przetestować .width() i zobaczyć, że jest równa zero lub nie: http://jsfiddle.net/mblase75/eGyRH/4/

alert($('.element').append('<span>asdf</span>').children().width());​

Jednak będzie to również zerowa szerokość, jeśli na przykład dodaję span do ukrytego elementu div: http://jsfiddle.net/mblase75/eGyRH/5/ - więc nie jest też całkowicie niezawodny.


0
2018-06-22 18:41





Przyjęta odpowiedź ma bardzo dobre działanie oparte na które typy węzłów mogą być nieważne. Można go zastąpić jedną linią jQuery:

node.is("area,base,br,col,command,embed,hr,img,input,keygen,link,meta,param,source,track,wbr")


0
2018-04-25 15:18