获取jQuery中匹配元素的文本

Question

在以下HTML中......

<p>abc<span class='blue'>def</span>ghi</p>

...我希望在span元素之前得到文本字符（在本例中为字母c ）。 假设p标签之间的字符串具有任意内容和长度，并且span元素可以位于p标签之间的任何位置。 当开始p标签与开口span标签相邻时，应返回空字符串。

有没有一种方便的方法来检索这样的jQuery？

Answer 1

您可以使用：

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> 

JS小提琴演示 。

这将找到与选择器匹配的所有元素，然后使用[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> 

JS小提琴演示 。

---

编辑并变成一个功能：

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> 

JS小提琴演示 。

最后，一个纯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);

最后两个之间的关键区别在于querySelectorAll()返回元素的集合，无论该集合是否具有一个或多个元素 - 因此需要使用索引来检索特定元素，而querySelector()仅返回一个元素- 第一个匹配的节点，如果没有找到匹配的节点，则返回null 。

参考文献：

• nodeValue 。
• previousSibling 。
• substring() 。

Answer 2

这是jsfiddle上的预期解决方案演示：

代码如下：

var all=$("p").text(); // everything inside <p>
var sub=$("span ").text(); // everything inside <span>
var pos= all.indexOf(sub)-1; // place of just letter before span
alert(all[pos]);​