jQuery: Anzahl der Geschwister desselben Tags

Question

Hier komme ich mit einem jQuery-Problem. Betrachten Sie dieses Zufallselement:

<div id="some_random_id"> 
    <b></b> 
    <div></div> 
    <b></b> 
    <div></div> 
    <div></div> 
</div> 

Alles, was wir haben, ist ein Zeiger auf ein untergeordnetes Element. Wir wissen nichts über das Elternelement. Wir müssen eine Funktion schreiben, die die Anzahl der Geschwister mit dem gleichen Tag-Namen ausgibt.

function n_siblings_same_tagname(this){}; 

Funktion hat 2 zurück, wenn unser Objekt den Namen DIV-Tages ist und 1, wenn der Tag-Name ist B. Wie wir das tun? Dank

Answer 1

Ich würde vorschlagen:

function n_siblings_same_tagname(node){ 

    // Retrieve the tagName of the passed-in 
    // DOM node: 
    var elType = node.tagName; 

    // Converting the children the passed-node's 
    // parent's element children into an Array, 
    // using Array.from(): 
    return Array.from(node.parentNode.children) 

    // filtering that array, using an Arrow 
    // which retains only those elements 
    // whose tagName is equal to the 
    // tagName of the passed-in elementary: 
     .filter(elem => elem.tagName == elType) 
    // finding the length of the filtered Array, and 
    // subtracting 1, as we want siblings not all 
    // elements of that type: 
     .length - 1; 
} 

Oder, wenn jQuery bevorzugt wird:

function n_siblings_same_tagname(element){ 

    // we may receive a jQuery object, or a DOM 
    // node; here we wrap the received element 
    // with jQuery: 
    var el = $(element); 

    // returning the length of the number of 
    // sibling elements matching the 
// supplied selector, here the tagName 
// of the passed in element, and 
    return el.siblings(el.prop('tagName')).length 
} 

Angesichts der Antwort des OP, in den Kommentaren unten, würde ich die Alternative bieten:

function n_siblings_same_tagname(element){ 

    // we may receive a jQuery object, or a DOM 
    // node; here we wrap the received element 
    // with jQuery: 
    var el = $(element); 

    // returning the length of the number of 
    // child elements matching the selector 
    // provided by the tagName property 
    // of the passed-in element: 
    return el.parent().children(el.prop('tagName')).length 
} 

Oder die geänderte JavaScript:

function n_siblings_same_tagname(node){ 

    // Retrieve the tagName of the passed-in 
    // DOM node: 
    var elType = node.tagName; 

    // Converting the children the passed-node's 
    // parent's element children into an Array, 
    // using Array.from(): 
    return Array.from(node.parentNode.children) 

    // filtering that array, using an Arrow 
    // which retains only those elements 
    // whose tagName is equal to the 
    // tagName of the passed-in elementary: 
     .filter(elem => elem.tagName == elType) 
    // finding the length of the filtered Array: 
     .length; 
} 

Answer 2

Dies sollte alle Kinder von Ihren Eltern mit dem gleichen Tag wählen:

function n_siblings_same_tagname(element){ 
    element = $(element); 
    return element.parent().children(element.prop("tagName")).length; 
};