在下面的 HTML 中...
<p>abc<span class='blue'>def</span>ghi</p>
...我想获取紧接在 span
元素之前的文本字符(在本例中为字母 c)。假设 p
标签之间的字符串具有任意内容和长度,并且 span
元素可以位于 p
标签之间的任何位置。当起始 p
标签与起始 span
标签相邻时,应返回一个空字符串。
有没有一种方便的方法可以使用 jQuery 检索此类内容?
最佳答案
您可以使用:
var prevLetters = $('span.blue')[0].previousSibling.nodeValue,
lastLetter = prevLetters.substring(prevLetters.length - 1);
var prevLetters = $('span.blue')[0].previousSibling.nodeValue;
var lastLetter = prevLetters.substring(prevLetters.length - 1);
console.log(lastLetter);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>abc<span class='blue'>def</span>ghi</p>
这会找到与选择器匹配的所有元素,然后使用 [0]
符号,切换到 DOM 节点(而不是 jQuery 对象),并选择前一个兄弟节点(textNode
)并找到它的 nodeValue
.
然后使用 substring()
对其进行修改只给出最后一个字母。
已编辑:满足空串的要求,如果span
标记是父项的第一个子项:
var prevLetters, lastLetter;
if ($('span.blue')[0].previousSibling) {
prevLetters = $('span.blue')[0].previousSibling.nodeValue;
lastLetter = prevLetters.substring(prevLetters.length - 1);
}
else {
lastLetter = '';
}
var prevLetters, lastLetter;
if ($('span.blue')[0].previousSibling) {
prevLetters = $('span.blue')[0].previousSibling.nodeValue;
lastLetter = prevLetters.substring(prevLetters.length - 1);
} else {
lastLetter = '';
}
console.log(lastLetter);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><span class='blue'>def</span>ghi</p>
编辑并变成函数:
function prevLetter(elem){
if (!elem){
return false;
}
else {
var prevLetters, lastLetter;
if (elem.previousSibling){
prevLetters = elem
.previousSibling
.nodeValue;
lastLetter = prevLetters
.substring(prevLetters.length-1);
}
else {
lastLetter = '';
}
}
return lastLetter;
}
var lastLetter = prevLetter($('span.blue')[0]);
function prevLetter(elem) {
if (!elem) {
return false;
} else {
var prevLetters, lastLetter;
if (elem.previousSibling) {
prevLetters = elem
.previousSibling
.nodeValue;
lastLetter = prevLetters
.substring(prevLetters.length - 1);
} else {
lastLetter = '';
}
}
return lastLetter;
}
var lastLetter = prevLetter($('span.blue')[0]);
console.log(lastLetter);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>abc<span class='blue'>def</span>ghi</p>
最后,一个纯 JavaScript 的答案,它使用 document.querySelectorAll()
改变了 jQuery 选择器的选择器。在可用的情况下,使用 document.querySelectorAll()
的 DOM 选择器直接(所有其他代码与上面的函数相同):
var lastLetter = prevLetter(document.querySelectorAll('span.blue')[0]);
console.log(lastLetter);
// or:
var lastLetter = prevLetter(document.querySelector('span.blue'));
console.log(lastLetter);
最后两者之间的主要区别在于 querySelectorAll()
返回一个元素集合,无论该集合没有元素、一个元素还是多个元素——因此需要使用索引来检索特定元素,而 querySelector()
只返回一个——第一个——匹配的节点,或null
如果没有找到匹配的节点。
引用资料:
- >
nodeValue
. - >
previousSibling
. - >
substring()
.
关于javascript - 获取 jQuery 中匹配元素周围的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9719824/