使用jQuery在不同的`div`s上标记一行

Question

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

如何使这些行之一可以选择（以便可以使用带有jQuery的鼠标将它们复制到剪贴板中，在此示例中为Item 1 Item2）？ 用户不应该看到差异，只需执行正常过程（鼠标按下＆gt;鼠标移动＆gt;鼠标释放）。

不幸的是，我无法编辑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>

如果您现在尝试这样做，它会标记每列的一半。 Live Preview (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 example