[英]Get text surrounding the matched element in jQuery
In the following HTML... 在以下HTML中......
<p>abc<span class='blue'>def</span>ghi</p>
...I want to get the character of text immediately preceding the span
element (in this case the letter c ). ...我希望在span
元素之前得到文本字符(在本例中为字母c )。 Assume that the string between the p
tags is of arbitrary contents and length, and that the span
element could be anywhere in between the p
tags. 假设p
标签之间的字符串具有任意内容和长度,并且span
元素可以位于p
标签之间的任何位置。 When the opening p
tag is adjacent to the opening span
tag, an empty string should be returned. 当开始p
标签与开口span
标签相邻时,应返回空字符串。
Is there a convenient way to retrieve such with jQuery? 有没有一种方便的方法来检索这样的jQuery?
You can use: 您可以使用:
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>
This finds all the elements matching the selector and then, using the [0]
notation, switches to the DOM node (rather than the jQuery object), and selects the previous sibling (a textNode
) and finds its nodeValue
. 这将找到与选择器匹配的所有元素,然后使用[0]
表示法切换到DOM节点(而不是jQuery对象),并选择先前的兄弟( textNode
)并查找其nodeValue
。
This is then modified using the substring()
to give only the last letter. 然后使用substring()
修改它以仅提供最后一个字母。
Edited : to meet the requirement of an empty string, if the span
tag is the first child of the parent: 编辑 :如果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>
Edited and turned into a function: 编辑并变成一个功能:
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>
And, finally, a pure JavaScript answer which changes the selector from a jQuery selector, utilising document.querySelectorAll()
where available, to a DOM selector utilising document.querySelectorAll()
directly (all other code remains the same as in the function above): 最后,一个纯JavaScript的答案,它从jQuery选择器更改选择器,利用document.querySelectorAll()
如果可用document.querySelectorAll()
直接利用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);
The key difference between the last two is that querySelectorAll()
returns a collection of elements, whether that collection has none, one or many elements - and therefore requires the use of an index to retrieve a particular element, whereas querySelector()
returns only one – the first – matching Node, or null
if no matching nodes were found. 最后两个之间的关键区别在于querySelectorAll()
返回元素的集合,无论该集合是否具有一个或多个元素 - 因此需要使用索引来检索特定元素,而querySelector()
仅返回一个元素- 第一个匹配的节点,如果没有找到匹配的节点,则返回null
。
References: 参考文献:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.