How can I change my HTML output using jQuery?

Question

How can I change my HTML output using jQuery? My Magento-Shop gives me a list of definitions, but I want these lists to be drop-down (select / options). I am a jQuery intern ... not Pro;)

So I need hints or hints. What were the keywords

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

- my conclusion, and I want it as a dropdown menu

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

Thanks for your help ... I just need a hint .. a search query or sth. How can I control the output?

Answer 1

You will need to get all the values ​​from the data list, and then create a new HTML line to add to the DOM.

You also need to remove the datalist before adding a new selection, as they will have the same identifier.

As you add, the choice will depend on the structure of your HTML; I used append to add it as a fist child, although you may need to do something else.

EDIT tag added as first option

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

Answer 2

You can iterate through your definition list using $ .each, first you need to target ol using the identifier of the definition list, and maybe go through a search to find the list, and you can create a drop-down list in the $ .each repetition list

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

Answer 3

Here is my updated Script .. You will see that I have 3 lists and I am trying to separate them. It is almost perfect. And links are also available for viewing.

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