将 HTML 代码更改为 jQuery 并将其输出到文本框中

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> class 名称更改为 "selected":

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

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

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

如何将修改后的 HTML 代码输出到文本区域？

Answer 1

更改类后，select 所需的父元素并将其 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

这是咯咯笑的替代方法：

DEMO

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

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

});

将 HTML 代码更改为 jQuery 并将其输出到文本框中

Change HTML code with jQuery & output it into textbox

jquery

DEMO