从类名查找前面的textnode

Question

<p>
   <ins>this is sample text</ins> here text node 
   <span class='cursor'></span><ins>last word</ins>
</p>


$('.cursor').prev()

返回前一个ins标记。

如何在span.cursor之前找到here text node

Answer 1

您可以使用

$('.cursor')[0].previousSibling

Answer 2

您的问题有点不清楚，但我的解释是您希望在textNode之前恢复<span class="cursor"> (包含<span class="cursor">的文本)

如果是这样的话，那么jQuery可以通过以下方法来管理它：

​

// here we find the '.cursor' element, and then
// using prop('previousSibling') we recover the
// previousSibling node of the first '.cursor'
// in the collection:
var node = $('.cursor').prop('previousSibling'),

// here we recover the nodeValue (the text) of the
// recovered previousSibling (textNode) node:
  text = node.nodeValue;

console.log(text);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><ins>this is sample text</ins> here text node <span class='cursor'></span><ins>last word</ins>

​

如果您希望恢复所有这样的textNode，如果您有多个<span class="cursor">元素，那么我们可以使用：

​

// here we again select all '.cursor' elements, and then
// filter that collection, using filter():
var nodes = $('.cursor').filter(function() {
    // we retain only those elements for which the
    // following statement returns a truthy statement,
    // if there is no previousSibling the evaluation
    // results in null, and so is discarded:
    return this.previousSibling;
  // here we use map() to create an array-like
  // structure:
  }).map(function() {

    // here we return the previousSibling node
    // to the collection:
    return this.previousSibling;
  }),

  // here we create an array-like collection
  // of the text of those found nodes, using map():
  text = nodes.map(function() {

    // returning the nodeValue (the text) of the node:
    return this.nodeValue;

  // using get() to convert the array-like collection
  // into an Array:
  }).get();

console.log(text);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><ins>this is sample text</ins> here text node <span class='cursor'></span><ins>last word</ins>
</p>
<p><span class='cursor'></span><ins>last word</ins>
</p>
<p><ins>this is sample text</ins> here is another text node <span class='cursor'></span><ins>last word</ins>
</p>

​

当然，值得指出的是，在这个问题上，jQuery没有比普通的JavaScript提供任何东西，而且可能更困难一些。使用普通的JavaScript，您可以使用以下简单形式：

​

// here we use Array.from() to convert the Array-like collection
// returned by document.querySelectorAll() into an Array:
var cursors = Array.from(document.querySelectorAll('.cursor')),

  // here we filter the Array of cursor element-nodes
  // using Array.prototype.filter():
  nodes = cursors.filter(function(cursorNode) {
    // cursorNode is a reference to the current
    // node of the Array of nodes over which we're
    // iterating.

    // here we retain only those cursorNodes that 
    // have a previous sibling:
    return cursorNode.previousSibling;

    // using Array.prototype.map() to create an Array:
  }).map(function(cursorNode) {

    // returning the previous sibling of the
    // current cursorNode to the newly-formed
    // Array:
    return cursorNode.previousSibling;
  }),

  // here we iterate over the nodesArray, again
  // using Array.prototype.map():
  text = nodes.map(function(node) {
    // node is a reference to the current node
    // of the array of nodes over which we're
    // currently iterating.

    // here we return the nodeValue of the current node:
    return node.nodeValue;
  });

console.log(text);

<p><ins>this is sample text</ins> here text node <span class='cursor'></span><ins>last word</ins>
</p>
<p><span class='cursor'></span><ins>last word</ins>
</p>
<p><ins>this is sample text</ins> here is another text node <span class='cursor'></span><ins>last word</ins>
</p>

​

值得注意的是，由于我假设对该方法不熟悉，所以上面的JavaScript版本不那么简洁；简而言之，可以简单地编写以下内容：

​

var previousTexts = Array.from(document.querySelectorAll('.cursor'))
  .filter(function(cursorNode) {
    return cursorNode.previousSibling;
  }).map(function(cursorNode) {
    return cursorNode.previousSibling.nodeValue;
  });

console.log(previousTexts);

<p><ins>this is sample text</ins> here text node <span class='cursor'></span><ins>last word</ins>
</p>
<p><span class='cursor'></span><ins>last word</ins>
</p>
<p><ins>this is sample text</ins> here is another text node <span class='cursor'></span><ins>last word</ins>
</p>

​

而且，如果您(或您的用户)正在使用与ES6兼容的浏览器，当然可以使用Arrow函数语法更简洁地编写它(尽管请注意，编写脚本的主要目的并不是简洁，但它们首先需要让跟随您的人理解)：

​

var previousTexts = Array.from(document.querySelectorAll('.cursor'))
  .filter(cursorNode => cursorNode.previousSibling)
  .map(cursorNode => cursorNode.previousSibling.nodeValue);

console.log(previousTexts);

<p><ins>this is sample text</ins> here text node <span class='cursor'></span><ins>last word</ins>
</p>
<p><span class='cursor'></span><ins>last word</ins>
</p>
<p><ins>this is sample text</ins> here is another text node <span class='cursor'></span><ins>last word</ins>
</p>

​

参考文献：

• JavaScript：
  • Array.from()。
  • Array.prototype.filter()。
  • Array.prototype.map()。
  • document.querySelectorAll()。
  • 箭头函数。
  • Node.nodeValue。
  • Node.previousSibling。

​

• jQuery：
  • filter()。
  • map()。
  • prop()。

​

Answer 3

您可以找到不使用本机代码的文本：

​

console.log(document.getElementsByClassName('cursor')[0].previousSibling.nodeValue)

<p><ins>this is sample text</ins> here text node <span class='cursor'></span><ins>last word</ins>

​