如何将特定行HTML转换为jquery变量

Question

查看jsFiddle I set up。

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

一旦我将所有匹配行的HTML放入变量，我需要在另一个<tr＆gt;之后插入这些行。其<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()来自DOM的“cut”元素（不删除可能附加的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"]'的锚点。