Make single line in div selected when clicked

Question

I wish to make a single line in a div highlighted when clicked (not the whole div selected)

I can use jquery or javascript as needed.

The div new lines are separated by br tag.

<div class="selectline">
    aaaaaaaaaaaaaabbbbbbbbbbbbbccccccccccccccccc<br>
    aaaaaaaaaaaaaabbbbbbbbbbbbbccccccccccccccccc<br>
    aaaaaaaaaaaaaabbbbbbbbbbbbbccccccccccccccccc<br>
</div>

Thank you.

Please note: the text needs to be highlited - as in if I right and click and select copy it will copy the entire line.

erm, this is not a duplicate. I want to highlight each row sepratealy when clicked. — J. Podolski, Feb 22 '14 at 09:38

score 1 · Accepted Answer · answered Feb 22 '14 at 02:45

1

Take a look at this fiddle, I believe it will do what you need, including removing selected by clicking on the selected item, http://jsfiddle.net/LAgqa/

Note the HTML, you'll have to wrap each line in a tag, I selected span in this example.

$('.selectline > span').click(function(){
    var t = $(this);
    if (t.hasClass('selected')) {
        t.removeClass('selected');
    } else {
        t.parent().children('span').removeClass('selected');
        $(this).addClass('selected');
    }
});

answered Feb 22 '14 at 02:45

Brocco

62,737
12
70
76

edit: actually this isn't 'highlighted' for copy for example...any idea? – J. Podolski Feb 22 '14 at 03:20
1

now that you've clarified/redefined 'highlighting' take a look at this post. http://stackoverflow.com/questions/985272/jquery-selecting-text-in-an-element-akin-to-highlighting-with-your-mouse – Brocco Feb 22 '14 at 03:31

Make single line in div selected when clicked

1 Answers1