1

div水平に積み重ねられた2つのレイアウトがあります。それぞれに要素の行が含まれています。

Item 1 Item2jQueryを使用してマウスを使用して、これらの行の1つを選択可能にするにはどうすればよいですか（この例では、これらの行を自分のクリップボードにコピーできます）。せいぜい、ユーザーは違いを認識せず、通常のプロセス（マウスを押す>マウスを動かす>マウスを離す）を実行するだけです。

残念ながら、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）

ここに画像の説明を入力してください

4

1 に答える 1

2

表形式のデータを2つの別々の仕切りに入れています。仕切りのスタイルをどのように設定しても、テキストを選択するときに段落が並んで表示されることはありません。マークアップを変更できない場合にできることの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の例。

于 2013-03-26T14:33:31.043 に答える