找不到我的問題的解決方案,希望您能提供幫助:
我懂了 :
<hr id="first-hr" />
<p> lorem ipsum </p>
<span> bla bla bla </span>
<hr />
我想在 javascript 中自動將父級添加到已識別的 hr 和下一個之間的任何內容
<hr id="first-hr" />
<div id="my-new-div">
<p> lorem ipsum </p>
<span> bla bla bla </span>
</div>
<hr />
目標是通過添加一個類來為這個 div 添加一些樣式。如果檢索已識別的 hr 和下一個之間的所有元素并在不添加父級的情況下向它們添加一個類更簡單,我也可以!
謝謝 !<3
uj5u.com熱心網友回復:
這段代碼將遍歷元素的所有兄弟first-hr
元素,將它們附加到div
插入first-hr
元素之后的 a 中:
const hr = document.getElementById('first-hr')
let next = hr.nextSibling
const div = document.createElement('div')
hr.parentNode.insertBefore(div, next)
div.setAttribute('id', 'my-new-div')
while (next) {
let node = next
next = next.nextSibling
div.appendChild(node)
if (!next || next.nodeName == 'HR') break
}
#my-new-div {
background-color: lightblue;
}
<hr id="first-hr">
<p id="x"> lorem ipsum </p>
<span> bla bla bla </span>
<hr />
這是另一種方法,其中沒有任何顯式回圈,但它當然存在,隱藏在對 and 的呼叫indexOf
中findIndex
:
const hr = document.getElementById('first-hr')
let siblings = [...hr.parentNode.childNodes]
siblings = siblings.slice(siblings.indexOf(hr) 1)
const nexthr = siblings.findIndex(n => n.nodeName == 'HR')
siblings = siblings.slice(0, nexthr)
const div = document.createElement('div')
div.setAttribute('id', 'my-new-div')
div.append(...siblings)
hr.parentNode.insertBefore(div, hr.nextSibling)
#my-new-div {
background-color: lightblue;
}
<hr id="first-hr">
<p id="x"> lorem ipsum </p>
<span> bla bla bla </span>
<hr />
uj5u.com熱心網友回復:
這是執行您所描述的一種方法:
function surround(id) {
const hr = document.querySelector(id);
const children = hr.parentNode.children;
const include = [];
let startIncluding = false;
for (let child of children) {
if (!startIncluding) {
if (child === hr) startIncluding = true;
} else {
if (child.tagName !== 'HR') {
include.push(child);
} else {
break;
}
}
}
const div = document.createElement('div');
for (let child of include) {
div.append(child);
}
div.className = 'new-div';
hr.after(div);
}
.new-div {
background-color: #def;
border: 2px dashed red;
padding: 0 2em 1em 2em;
border-radius: 3em;
}
<button onclick="surround('#first-hr')">Surround First</button>
<button onclick="surround('#second-hr')">Surround Second</button>
<div class="wrapper">
<hr id="first-hr" />
<p> first: lorem ipsum </p>
<span> first: bla bla bla </span>
<hr />
<hr id="second-hr" />
<p> second: lorem ipsum </p>
<span> second: bla bla bla </span>
<hr />
</div>
uj5u.com熱心網友回復:
如果您想在 div 標簽中添加類,請在其中插入這個類,它應該看起來像
<div id="my-new-div ">
.. 完成后嘗試將類添加到 css
.text-container{
background-color: aqua;
margin
}
<hr id="first-hr" />
<div class="text-container" id="my-new-div" >
<p> lorem ipsum </p>
<span> bla bla bla </span>
</div>
<hr />
如果要樣式h1
添加類并將其樣式設定為 css
uj5u.com熱心網友回復:
<hr id="first-hr" />
<p class="add-styles"> lorem ipsum </p>
<span class="add-styles"> bla bla bla </span>
<hr />
document.querySelectorAll("hr#first-hr > .add-styles").forEach(tag => {
tag.classList.add("some-class") //or .remove()
})
轉載請註明出處,本文鏈接:https://www.uj5u.com/shujuku/504662.html
標籤:javascript html css
上一篇:請問,如何使用JavaScript將jsonAPI呼叫中的專案限制為兩個?
下一篇:Javascript中的變數更新