我正在尝试创建一个脚本来动态创建锚标签和指向特定元素的链接。但是,当我输出锚文本时,它会在哈希和文本之间添加一堆空格。
$(document).ready(function(){
$('.accordion h2').each(function(){
var thisText = $(this).text();
var anchorText = thisText.replace(/ /g, "-");
var anchorLink = '<a name="' + anchorText + '"></a>';
var anchorTextFull = '<a href="#' + anchorText + '">' + thisText + '</a>';
$(this).before(anchorLink);
$(this).after(anchorTextFull);
});
});
此代码为anchorTextFull变量输出以下内容:
<a href="# foo-bar">Foo Bar</a>
这些空间来自哪里?
由于
答案 0 :(得分:5)
jQuery包含一个trim函数,可用于删除字符串开头或结尾的额外空格:
var thisText = $.trim($(this).text());
答案 1 :(得分:4)
这个问题实际上是由HTML表现不同于JQuery引起的。在HTML中,空格和额外的行无关紧要。
在HTML中,这两个示例在呈现到页面时在视觉上是相同的:
<div id="vendor">Barracuda</div>
和
<div id="vendor">
Barracuda
</div>
但是,当您使用JQuery的.Text()方法时,它们会产生不同的结果。
<div id="vendor">Barracuda</div>
$('#vendor').text() // equals "Barracuda"
但这是非常不同的:
<div id="vendor">
Barracuda
</div>
$('#vendor').text() // equals " Barracuda "
因此,如果你不能定制HTML,或者只是想安全地播放,那么需要.trim()结果。
var thisText = $.trim($(this).text());
答案 2 :(得分:0)
这些可能来自$(this).text()
。这些可能是h2
代码中的新行字符。做alert("'" + $(this).text() + "'" )
确认。