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

Question

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

我如何才能使这些行之一变为可选择状态（以便可以将它们复制到他的剪贴板中，在本示例中为Item 1 Item2 ）？ 充其量，用户应该看不到差异，而只是执行正常过程（鼠标按下>鼠标移动>鼠标释放）。

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