如何将特定行的 HTML 放入 jquery 变量中

Question

查看jsFiddle I set up。

我的目标是获取每个 <tr> 的整个 HTML，该类具有“docClassesRow”类，并且位于具有特定名称值的 <a> 元素的 <tr> 之后（jsFiddle 表中的 docID） .

一旦我将所有匹配行的 HTML 放入变量中，我需要在另一个 <tr> 之后插入这些行，该 <a> 元素具有特定的名称值。出于此测试的目的，我可以在 docRow <tr> 之后将 HTML 插入回表中。

使用现有的 js，我没有将 HTML 放入变量中。

Answer 1

也许是这样的？我添加了对特定id的链接的搜索：

$(function(){
     $(".docClassesRow").each(function(){
         $("#specific").parents("tr:first").append($(this).html());
    });
});

http://jsfiddle.net/bdVAR/4/

更新 在您的代码中，解决方案是 http://jsfiddle.net/FWJE2/9/

Answer 2

不要仅读取现有 DOM 元素的 HTML 以将其再次插入 DOM。使用现有的 DOM 元素并复制/移动它们，而不是它们的 HTML。这样会干净很多。

需要的先决条件

你需要的是：

• .detach() 用于 "cutting" DOM 中的元素（不删除可能附加的 jQuery 数据），或.clone() 用于 复制要保留的元素当前位置，
• .after()（或 .insertAfter()，如果您更喜欢相反的顺序或参数）用于在其他元素之后插入元素，

.clone() 和 .detach() 的示例

以下示例在表的行上实现 .clone() 和 .detach()。在第一列中选​​择将被复制/移动的行，在第二列中选择将粘贴复制/移动的行之后的行。选择了两行后，单击其中一个链接（取决于您要测试的功能）。见jsfiddle for demonstration。

HTML：

<table>
    <tr>
        <th>Which row?</th>
        <th>Copy after which?</th>
        <th>Original value</th>
    </tr>
    <tr>
        <td><input type="radio" name="from" checked="checked" /></td>
        <td><input type="radio" name="to" /></td>
        <td>AAAAA</td>
    </tr>
    <tr>
        <td><input type="radio" name="from" /></td>
        <td><input type="radio" name="to" checked="checked" /></td>
        <td>BBBBB</td>
    </tr>
    <tr>
        <td><input type="radio" name="from" /></td>
        <td><input type="radio" name="to" /></td>
        <td>CCCCC</td>
    </tr>
    <tr>
        <td><input type="radio" name="from" /></td>
        <td><input type="radio" name="to" /></td>
        <td>DDDDD</td>
    </tr>
</table>
<a href="#" title="" id="clone">Use .clone()</a>
<a href="#" title="" id="detach">Use .detach()</a>

JavaScript（执行 onLoad 或 onDomReady，以便找到合适的 DOM 元素）：

jQuery('#clone').on('click', function(event){
    event.preventDefault();
    var from_row = jQuery('[name="from"]:checked').parents('tr');
    var to_row = jQuery('[name="to"]:checked').parents('tr');
    to_row.after(from_row.clone());
});
jQuery('#detach').on('click', function(event){
    event.preventDefault();
    var from_row = jQuery('[name="from"]:checked').parents('tr');
    var to_row = jQuery('[name="to"]:checked').parents('tr');
    to_row.after(from_row.detach());
});

请参阅 this jsfiddle 以获取其有效的证明。

Answer 3

你的代码的问题是find

获取当前匹配元素集中每个元素的后代。

在您的代码中是$docRow，所以它选择所有与您的.docRow a[name="178"]' 匹配然后.parent().parent() 获取匹配行内的所有<td>，很明显，在下一步中，当您在其中搜索<tr>，您将找不到任何东西，因为您正在当前的<tr> 中搜索。所以你需要重新考虑你正在尝试做的事情，因为这样它不会起作用，可能是作为替代解决方案，尝试搜索'tr.docClassesRow'，然后在其后代中搜索具有a[name="178"]'的锚。