Question

如何使用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>

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

Answer 1

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

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

Answer 2

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

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

如何添加select将取决于HTML的结构;我使用append将其添加为第一个孩子，尽管你可能需要做一些不同的事情。

编辑添加标签作为第一个选项

$(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

Answer 3

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


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

如何使用jQuery更改HTML输出？

3 个答案: