javascript - 使用 jQuery 在不同的 div 中标记一行

Question

我有两个div水平堆叠的布局。它们中的每一个都包含一行元素。

我怎样才能使这些行之一成为可选择的（以便人们可以将它们复制到他的剪贴板，在这个例子中Item 1 Item2：）用鼠标和 jQuery？充其量用户不应该看到差异，只需执行正常过程（鼠标按下>鼠标移动>鼠标释放）。

不幸的是，我无法编辑 Html。

<div style="float:left;">
    <p>Item 1</p>
    <p>Item 1</p>
    <p>Item 1</p>
    <p>Item 1</p>
    <p>Item 1</p>
</div>
<div>
    <p>Item 2</p>
    <p>Item 2</p>
    <p>Item 2</p>
    <p>Item 2</p>
    <p>Item 2</p>
</div>

如果您现在尝试这样做，它会标记每列的一半。 实时预览 (JSFiddle)

Answer 1

您将表格数据放入两个单独的分隔符中。无论您如何设计分隔线，在进行文本选择时，段落永远不会并排。如果您无法更改标记，您可以做的一件事是将其转换为表格：

/* Count the total number of children within the first divider.
 * This assumes both will always be equal. */
var total = $('div:first-child').children().length,

/* Create the table. */
    table = $('<table><tbody></tbody></table>');

/* Loop from 0 to total. */
for(i=0;i<total;i++)
{
    /* Create the table row. */
    var tr = $('<tr></tr>'),
    /* Index will be i + 1, store this as new variable. */
        j = i + 1;

    /* Loop through each matching nth-child. */
    $('div p:nth-child(' + j + ')').each(function() {
        /* Create the table cell. */
        var td = $('<td></td>');

        /* Set the cell's text to the paragraph's text. */
        td.text($(this).text());

        /* Append cell to row. */
        td.appendTo(tr);
    })

    /* Append row to table's tbody. */
    tr.appendTo($('tbody', table));
}

/* Append table to body. */
table.appendTo('body');

/* Remove dividers. */
$('div').remove();

JSFiddle 示例。