javascript - 获取 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 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 的答案，它使用 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() .