Geschwister pure JavaScript mit show and hide, jetzt jQuery

Question

Was ist der beste Weg, dies zu erreichen, Vanille JavaScript. Ich möchte es wirklich verstehen. Vielen Dank.

$(duplicate[ii]).hide().siblings().show(); 

Answer 1

duplicate[ii] Angenommen wird ein DOM-Element, könnten Sie Schleife die Kinder der Eltern dieses Elements, und legen Sie den Stil des eigentlichen Elements nach der Schleife.

const d = duplicate[ii]; 

for (const el of d.parentNode.children) { 
    el.style.display = "block"; 
} 
d.style.display = "none"; 

---

Während jedoch, dass im Grunde eine Übersetzung ist, würde ich es auf diese Weise nicht schreiben. Ich würde Klassen mit dem entsprechenden Styling verwenden:

const d = duplicate[ii]; 

for (const el of d.parentNode.querySelectorAll(".hide")) { 
    el.classList.remove("hide"); 
} 
d.classList.add("hide"); 

---

.hide { 
    display: none; 
} 

---

Wenn Sie wissen, nur ein Element hide zu einem bestimmten Zeitpunkt haben, können Sie die Schleife fallen.

const h = duplicate[ii].parentNode.querySelector(".hide") 
if (h) { 
    h.classList.remove("hide"); 
} 
duplicate[ii].classList.add("hide"); 

---

Wenn Sie dies häufig tun, würde ich eine Nutzenfunktion erstellen, die einen Klassennamen erhält, ein Element, und eine Sammlung. Sie können es sogar erweitern, sodass die Sammlung optional ist. In diesem Fall würden Sie die Geschwister verwenden.

function swapClass(clss, target, els) { 
    if (!els) { 
     els = target.parentNode.children; 
    } 

    for (const el of els) { 
     el.classList.remove(cls); 
    } 
    target.classList.add(cls); 
} 

Dann ist es wie folgt aus:

swapClass("hide", duplicate[ii]); 

Answer 2

const toArray = (list) => Array.prototype.slice.call(list) 

const foo = (node) => { 
    let children = toArray(node.parentNode.children) 
    children.forEach(child => { 
     child.style.display = child === node ? 'none' : 'block' 
    }) 
} 

Wenn duplicate[ii] ein DOM, nur foo(duplicate[ii])

Wenn duplicate[ii] ein CSS-Selektor ist, können Sie

toArray(document.querySelectorAll(selector)).forEach(node => { 
    foo(node) 
}) 

Diese Antwort wird angenommen, Knoten ist Block Element