獲取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]);​