Question

我有这样的HTML结构：

<tr>
   <td class="CT">
      anything –
      <span class="cu">
         <a href="#"></a>
      </span> – 
      <span class="dt">content</span>
   </td>
</tr>

现在我想从所有HTML代码中选择anything。怎么样？我可以选择它的文字：

$('tr').text();
/* but the way, there is two function that I feel they can be useful:
   1. closest()
   2. siblings() */

嗯，有什么解决方案吗？

注意：我无法使用replace()，因为有时<span>的内容或<a>的href会有不同的内容。

编辑： anything不仅仅是一个字符串。它可以是以下之一：

anything = this is a <a href="www.example.com">test</a>

anything = hello, how are you

anything = <a href="www.example.com">test1</a> and <a href="www.example.com">test2</a>

实际上我希望td.CT的所有内容都在<span class="cu">之后。实际上，它是评论的内容（用于编辑它），我想在textarea中设置它（再次，用于编辑它）。

Answer 1

尝试使用contents().first().text()，就像评论中提到的 @adeneo 一样：

$('#result').text( $(".CT").contents().first().text().trim().replace(/–$/, '') );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
   <td class="CT">
      anything – 
      <span class="cu">
         <a href="#"></a>
      </span> – 
      <span class="dt">content</span>
   </td>
</tr>
</table>
<hr>
Output (<span id='result'></span>)

希望这有帮助。

Answer 2

这是一种（hacky）方法，可以在<span class="cu">节点之前提取“任何东西”。

查找所有td的内容
从jQuery集合转换为js数组
减少数组，使所有节点（但不包括<span class="cu">）都被推送到阵列上。
在$()中包装节点数组以形成jQuery集合。
最后将集合附加到某个DOM容器以使结果可见。

var $myFragment = $($(".CT").contents().get().reduce(function(obj, node) {
    if($(this).is("span.cu")) {
        obj.stop = true;
    }
    if(!obj.stop) {
        obj.nodes.push(node);
    }
    return obj;
}, {nodes:[], stop:false}).nodes);

// then
$("#myResult").append($myFragment);

// or maybe
//$("#myResult").append($myFragment.text());

我确信有一种更简单的方法，但我现在想不到它。

DEMOS：

这就是我谈论的那种简单方式：

var $myFragment = $(".CT").contents().filter(function(i, node) {
  return !$(node).prevAll().addBack().filter("span.cu").length;
});

演示：http://jsfiddle.net/1xonqeob/4/

这里有更通用的东西;一个jQuery插件.prevAllNodes()，其中：

对要在其上找到节点的元素进行操作。
接受要找到的nodeType或nodeTypes数组。不传递任何内容或[]以查找所有nodeTypes。
返回jQuery节点集合。

// *****************************************************
// A jQuery plugin to find DOM nodes of specified types 
// before the first element in a jQuery collection.
// *****************************************************
$.fn.prevAllNodes = function(types) {
    types = types || [];
    if(!$.isArray(types)) types = [types];
    var that = this.eq(0);
    var nodes = that.parent().contents().get().reduce(function(nodes, node) {
        nodes.stop = nodes.stop || (node == that.get(0));
        return nodes.stop ? nodes : nodes.concat(node);
    }, []).filter(function(node) {
        return types.length == 0 || $.inArray(node.nodeType, types) > -1;
    });
    return $(nodes);
}

使用如下：

var $commentsNodes = $(".CT span.cu").prevAllNodes([Node.COMMENT_NODE]); 

// $commentsNodes is a jQuery collection
// To read comments' text, you need to know to use the `.nodeValue` property. jQuery's $(commentNode).text() will not work.

DEMO：http://jsfiddle.net/1xonqeob/5/

$。fn.nextAllNodes（）会非常相似

Answer 3

这是我解决这个问题的方法。代码在span.cu元素之前获取任何个节点（包括注释和文本）。

为了演示目的，我将目标元素移动到新的<div>。

＆＃13;

var tdContents = $('td.CT').contents();
var cu = $('span.cu');
var cuPosition;

// get the position of the span.cu element
tdContents.each(function(i, el) {
  if (el == cu[0]) {
    cuPosition = i;
  }
});

// get rid of span.cu and following nodes
var result = tdContents.slice(0, cuPosition - 1);

// put the interesting content in another div
result.appendTo('#result');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
<tbody>
  <tr>
    <td class="CT">
      anything – <a style="color: red">(really)</a>
      <span class="cu">
         <a href="#"></a>
      </span> – 
      <span class="dt">content</span>
    </td>
  </tr>
</tbody>
</table>

<div id="result"></div>

＆＃13;

如何选择特定元素后面的元素的所有内容？

3 个答案: