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之前恢复here text node（包含<span class="cursor">的文字）？

如果是这样，那么jQuery可以通过以下方式管理它：

＆＃13;

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

＆＃13;

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

＆＃13;

如果您要恢复所有此类textNode，如果您有多个<span class="cursor">元素，那么我们可以使用：

＆＃13;

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

＆＃13;

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

＆＃13;

当然值得指出的是，jQuery在这个问题上没有提供普通的JavaScript，也许有点困难。使用纯JavaScript，您可以使用以下简单形式：

＆＃13;

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

＆＃13;

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

＆＃13;

值得注意的是，因为我对这种方法缺乏了解，所以上述JavaScript版本不够简洁;缩写它们可以简单地写下以下内容：

＆＃13;

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

＆＃13;

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

＆＃13;

而且，如果您 - 或您的用户 - 正在使用与ES6兼容的浏览器，那么当然可以使用箭头函数语法更简洁地编写它（但请注意，简洁性不是的主要目标编写脚本时，他们首先需要被跟随你的人理解：

＆＃13;

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

＆＃13;

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

＆＃13;

参考文献：

JavaScript的：
- Array.from()。
- Array.prototype.filter()。
- Array.prototype.map()。
- document.querySelectorAll()。
- Arrow functions。
- 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>

从classname

3 个答案: