如何使用 jQuery 更改我的 HTML 输出？答案

【问题标题】：how can I change my HTML Output with jQuery?如何使用 jQuery 更改我的 HTML 输出？
【发布时间】：2013-05-06 16:34:34
【问题描述】：

如何使用 jQuery 更改我的 HTML 输出？我的 Magento-Shop 给了我一个定义列表，但我希望这些列表作为下拉（选择/选项）表单。我是 jQuery 实习生...不是专业人士 ;)

所以我需要一些提示或提示。关键字是什么

<dl id="list">

<dt>Erste Überschrift</dt>

    <dd>
        <ol>
            <li><a href="http://www.google.com/">link 1</a></li>
            <li><a href="http://www.bing.com/">link 2</a></li>
            <li><a href="http://www.yahoo.com/">link 3</a></li>
        </ol>
    </dd></dl>

是我的输出，我希望它作为下拉列表

<select id="list">
<option value="" selected>Erste Überschrift</option>
<option value="http://www.google.com/">Google</option>
<option value="http://www.bing.com/">Bing</option>
<option value="http://www.yahoo.com/">Yahoo</option>

感谢您的帮助...我只需要提示..搜索词或某事。如何操作输出？

【问题讨论】：

标签： jquery html output

【解决方案1】：

您需要从数据列表中获取所有值，然后创建一个新的 HTML 字符串以添加到 DOM。

您还需要在添加新选择之前删除数据列表，因为它们具有相同的 ID。

如何添加选择取决于 HTML 的结构；我使用append 将其添加为第一个孩子，但您可能需要做一些不同的事情。

EDIT添加标签作为第一个选项

$(function() {
    var list = $('#list'),
        label = list.find('dt').text(),
        parent = list.parent(),
        anchors = list.find('a'),
        html = '<select id="list"><option selected value="">' + list.find('dt').text() + '</option>'
        ;

    for(var i=0; i<anchors.length; i++) {
        //each anchor becomes an option in the select
        html += '<option value="' + anchors.eq(i).attr('href') + '">' + anchors.eq(i).text() + '</option>'; 
    }
    html += '</select>';

    list.remove(); //remove your datalist
    parent.append(html); //add your new select
});

工作jsFiddle

【讨论】：

感谢您的帮助。我拿了你的脚本并进行了一些更改..我有 3 个
，现在我尝试将它们分开.. 这是我的小提琴jsfiddle.net/mobilat/Nwdnn

【解决方案2】：

您可以使用 $.each 遍历您的定义列表，首先您必须使用定义列表 id 定位 ol，并且可能通过 find 遍历以找到列表，在 $.each 迭代列表中您可以构建下拉列表

$('#list').find('ol').each()
...
...
$('#list').append('<option value="value">value name</option>');

【讨论】：

【解决方案3】：

这是我更新的 Skript .. 你会看到我有 3 个列表，我尝试将它们分开。这几乎是完美的。并且链接也是可点击的。

http://jsfiddle.net/mobilat/Nwdnn/

【讨论】：