如何選擇特定元素后面的所有元素內容？

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所有內容td.CT在<span class="cu"> 。 實際上，它是注釋的內容（用於編輯），我想在文本區域中對其進行設置（再次用於編輯）。

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

這是一種在<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：

• 示例1： http ： //jsfiddle.net/1xonqeob/1/
• 示例2： http ： //jsfiddle.net/1xonqeob/2/
• 示例3： http ： //jsfiddle.net/1xonqeob/3/

---

這就是我所說的更簡單的方法：

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數組。 不傳遞任何內容或[]查找所有nodeType。
• 返回節點的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.

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

$ .fn.nextAllNodes（）會非常相似

Answer 3

這是我解決此問題的方法。 該代碼在span.cu元素之前獲取任意數量的節點（包括注釋和文本）。

我將目標元素移至新的<div>以進行演示。

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

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