我无法控制此项目中的HTML,因此一切都必须使用JavaScript / Jquery完成。
我有多个来自服务器的页面。其中一些表的页脚带有脚注。这些脚注的第一个字符是*或†
有时页面将有多个表。
我不能使用:: first-letter,因为它会选择符号和第一个字母。我需要填充仅在符号的右侧
我需要在这些字符的右侧添加填充以将其与文本分开。
我已经成功获得了符号。如您在我的代码中看到的,我选择了一个类,在该类中找到了跨度,获取了文本,并将其转换为子字符串。 然后,我得到每个字符的第一个字符,当我console.log我的结果时,我看到了符号。 我现在正尝试使用某种内联样式将它们包装在一个范围内,但是我得到了一个“ jquery-2.1.4.min.js:3 Uncaught DOMException:无法在'Node'上执行'insertBefore':仅一个元素允许。”错误。
HTML代码是在xsl文档中生成的,但这是从检查器中提取的表格页脚:
<div class="article-table-descriptions" style="width: 100%;">
<span id="tblfn4">*footer text.</span>
<span id="tblfn5">†footer text.</span>
</div>
$(document).ready(function () {
let chars;
let tableFooterSpans = $('.article-table-descriptions').find('span').text().split('.');
$(tableFooterSpans).each(function(i, str){
chars = str.charAt(0);
$(chars).wrap("<span style='color: lime;'></span>");
})
});
答案 0 :(得分:2)
尝试这个:
$(document).ready(function () {
var span = $('.article-table-descriptions > span');
span.each(function(index, el){
var span_html = $(el).html();
$(el).html("<span style='color: lime;'>"+ span_html.charAt(0) +"</span>" + span_html.substring(1,span_html.length));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="article-table-descriptions" style="width: 100%;">
<span id="tblfn4">*footer text.</span>
<span id="tblfn5">†footer text.</span>
</div>
<div class="article-table-descriptions" style="width: 100%;">
<span id="tblfn6">*footer text.</span>
<span id="tblfn7">†footer text.</span>
</div>
<div class="article-table-descriptions" style="width: 100%;">
<span id="tblfn8">*footer text.</span>
<span id="tblfn9">†footer text.</span>
</div>
答案 1 :(得分:0)
首先获取所有适当的span
元素,然后再尝试获取第一个字符。然后遍历跨度,获取第一个字符并获取字符串减第一个字符,包装第一个字符,然后更新span
。
$( () => {
const $spans = $( '.article-table-descriptions > span' );
$spans.each( ( i, span ) => {
const $span = $( span );
const str = $span.text();
const char = str.slice( 0, 1 );
const _str = str.slice( 1, str.length );
$span.html( `<span class="highlight--char">${char}</span>${_str}` );
} );
} );
.highlight--char {
margin-right: 0.5rem;
color: lime;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="article-table-descriptions" style="width: 100%;">
<span id="tblfn4">*footer text 1a.</span>
<span id="tblfn5">†footer text 1b.</span>
</div>
<div class="article-table-descriptions" style="width: 100%;">
<span id="tblfn4">*footer text 2a.</span>
<span id="tblfn5">†footer text 2b.</span>
</div>
答案 2 :(得分:0)
没有jQuery ,您可以执行类似的操作
let tableFooterSpans = document.querySelectorAll('.article-table-descriptions > span');
tableFooterSpans.forEach(e => e.innerHTML = e.innerHTML.replace(/(†|\*)?/g,"<span style='color: lime;margin-right:5px'>$1</span>"));
<div class="article-table-descriptions">
<span>†text1</span> <span>*text2</span>
</div>
答案 3 :(得分:0)
您可以尝试使用类似的方法来代替usig wrap()
$(document).ready(function () {
let chars;
let tableFooterSpans = $('.article-table-descriptions').find('span').text().split('.');
console.log("1",tableFooterSpans);
$(tableFooterSpans).each(function(i, str){
chars = str.charAt(0);
console.log("2", chars);
$("#test").append("<span style='color : yellow'>"+chars+"</span>");
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div class="article-table-descriptions" style="width: 100%;">
<span id="tblfn4">*footer text.</span>
<span id="tblfn5">†footer text.</span>
</div>
<div id="test">test</div>