将选定的li添加到现有ul

Question

I have a list of elements li

<ol class="selectable" id="firstList">
    <li class="ui-widget-content"> text 1</li>
    <li class="ui-widget-content"> text 2</li>
    <li class="ui-widget-content"> text 3</li>
</ol>

I want when I select one or more element in int the first list, these selected elements should be added to another list <ol>

<ol class="selectable" id="result">

</ol>

Answer 1

Simply you can do something like this

 $('#firstList li').click(function() { // click event handler for listening click event $(this).toggleClass('selected'); // toggling selected class class $('#result').html($('#firstList .selected').clone()) // updating result list with selected list item ( li which have selected class ) // use `.removeClass('selected')` if you want to remove selected class from clone }) 

 #firstList .selected { color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ol class="selectable" id="firstList"> <li class="ui-widget-content">text 1</li> <li class="ui-widget-content">text 2</li> <li class="ui-widget-content">text 3</li> </ol> <ol class="selectable" id="result"> </ol>