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 Fiddle demo

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

已修改并转为功能：

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 Fiddle demo

最后，一个纯JavaScript的答案，它将jQuery选择器中的选择器从可用的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()返回元素集合，无论该集合是否具有一个或多个元素 - 因此需要使用索引来检索特定元素，而{ {1}}只返回一个 - 第一个匹配的节点，如果找不到匹配的节点，则返回querySelector()。

参考文献：

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]);

获取jQuery中匹配元素的文本

2 个答案: