我正在嘗試使用 span 類將標題標簽中每個單詞的第一個字母包裝起來，以便我可以使用 CSS 設定它們的樣式。我試圖使用我在這里找到的一個片段，但我有 2 個 h1 標簽，它正在使用第一個標簽并在第二個標簽上重復它！
功能是這樣的：
<script>
$(document).ready(function() {
var words = $('h1').text().split(' ');
var html = '';
$.each(words, function() {
html = '<span >' this.substring(0, 1) '</span>' this.substring(1) ' ';
$('h1').html(html);
});
});
</script>
所以我在頂部的橫幅中有一個 h1，在內容的開頭有另一個，但是該功能正在使用頂部橫幅標題并用它替換內容標題，但是 span 類正在作業！
我知道你不應該有 2 個 h1，但無論如何我想定位所有標題，它是一個客戶的 CMS，所以我不能保證他們不會使用多個 h1，所以我正在測驗它！
uj5u.com熱心網友回復：
如果要設定每個標題中每個單詞的第一個字母的樣式，則可以將每個單詞包含在 a 中的標題中，然后使用::first-letter CSS 偽元素<span>設定這些spans 的第一個字母的樣式。
const headingEls = document.querySelectorAll("h1");
headingEls.forEach((h) => {
h.innerHTML = h.textContent
.split(" ")
.map((w) => `<span>${w}</span>`)
.join(" ");
});h1 span {
display: inline-block;
}
h1 span::first-letter {
font-size: 3rem;
color: palevioletred;
}<h1>Heading</h1>
<h1>Another Heading</h1>如果您只想設定每個標題的第一個字母的樣式，則不需要JS，只需使用::first-letter CSS 偽元素即可。
h1::first-letter {
font-size: 3rem;
color: palevioletred;
}<h1>Heading</h1>
<h1>Another Heading</h1>uj5u.com熱心網友回復：
const h1 = document.getElementsByTagName("H1");
for (const item of h1) {
item.innerHTML = "<span>" item.innerHTML[0] "</span>" item.innerHTML.slice(1)
}
假設您的h1標簽沒有孩子。雖然很容易修改它以獲得正確的結果。
uj5u.com熱心網友回復：
根據 OP 的要求，這將“包裝每個單詞的第一個字母”。
由于有兩個<h1>元素（正如 OP 所說，非常錯誤），一個人也應該使用它們來迭代它們each，就像 OP 對words陣列所做的那樣。
$(document).ready(function() {
$('h1').each( function(index, heading) {
const words = $(heading).text().split(' ')
let html = '';
$.each(words, function() {
html = '<span >' this.substring(0,1) '</span>' this.substring(1) ' ';
})
$(heading).html(html);
})
});span.firstLetter {
color: violet;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Lorem ipsum dolor sit amet</h1>
<hr>
<h1>Bacon ipsum dolor amet biltong pork chop bacon</h1>uj5u.com熱心網友回復：
這應該有效：
.firstLetter
{
color:red;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Hello World</h1>
<h1>Goodbye World</h1>
<script>
var h1s = document.getElementsByTagName('h1');
for(const h1 of h1s)
{
let text = h1.innerText.split(' ');
let html = "";
for(const word of text)
{
html = '<span >' word.substring(0, 1) '</span>' word.substring(1) ' ';
}
h1.innerHTML = html;
}
</script>uj5u.com熱心網友回復：
要設定每個標題中每個單詞的每個首字母的樣式，您可以使用 jQuery .html()（正如您在問題中使用 jQuery）。這將遍歷每個h1，并將其中的文本替換為回傳的值。新值將使用正則運算式匹配的每個單詞的第一個字母（在替換引數中稱為 using ）$&（匹配單詞邊界( ) 后跟字符 ( )），并將字符本身包裹在標簽中： \b\w\b\w<span>
$("h1").html(function(i, txt) {
return txt.replace(/\b\w/g, '<span >$&</span>');
});.firstLetter {
color: red;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>This is a heading</h1>
<h1>This is another heading</h1>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/477544.html
標籤：javascript jQuery