兄弟純粋なJavaScriptの表示と非表示、今すぐjQuery

Question

これを達成する最良の方法は、バニラJavaScriptです。 私は本当にそれを理解したい。 ありがとうございます。

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

Answer 1

DOM要素がduplicate[ii]をされたと仮定すると、あなたは、ループ、その要素の親の子供たち、そして、ループの後に実際の要素のスタイルを設定することができます。

const d = duplicate[ii]; 

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

---

それは基本的に翻訳だながらしかし、私はそのように記述しないでしょう。あなたが唯一の要素は、任意の時点でhideを持っていることを知っている場合は、ループをドロップすることができ

const d = duplicate[ii]; 

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

---

.hide { 
    display: none; 
} 

---

：私は、適切なスタイリングを持つクラスを使用すると思います。

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

---

頻繁にこの操作を行う場合、私はクラス名、要素、およびコレクションを受ける効用関数を作成したいです。コレクションをオプションにすることができます。その場合は、兄弟を使用します。

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' 
    }) 
} 

duplicate[ii]がDOMの場合duplicate[ii]はCSSセレクタであるだけfoo(duplicate[ii])

場合、あなたは

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

を使用することができます。

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

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

そのちょうどこのよう

この回答は、ノードがBlockの要素であると仮定しています。