使用jQuery＆amp;更改HTML代码将其输出到文本框中

Question

我有一个HTML代码：

<ul>
     <li class="1"><a>Option #1</a></li>
     <li class="2"><a>Option #2</a></li>
</ul>

<textarea>Output the changed HTML-code here</textarea>

我有jQuery脚本，可以在点击时将<li>类名更改为“selected”：

$('ul li').click(function() {
    $(this).addClass('selected').siblings('li').removeClass('selected');
});

点击后，例如，选项＃1，jQuery会将<li>类更改为“1 selected”，我需要将以下代码输出到textarea：

<ul>
     <li class="1 selected"><a>Option #1</a></li>
     <li class="2"><a>Option #2</a></li>
</ul>

如何将修改后的HTML代码输出到textarea？

Answer 1

更改类后，选择所需的父元素并将其HTML替换为textarea：

$('ul li').on('click', function () {
    $(this).addClass('selected').siblings('li').removeClass('selected');
    $('textarea').html($(this).closest('.parent-element').html());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent-element">
    <ul>
        <li class="1"><a>Option #1</a></li>
        <li class="2"><a>Option #2</a></li>
    </ul>
</div>
<textarea style="width: 100%; height: 400px;">Output the changed HTML-code here</textarea>

Answer 2

这是giggles的另一种选择：

DEMO

$('ul').on('click', 'li', function () {

    $(this)
        .addClass('selected')
        .siblings('li')
        .removeClass('selected')
        .parent()
        .next('textarea')
        .val($(this).text());

});