如何使用jQuery更改我的HTML輸出？

如何使用jQuery更改我的HTML輸出？我的Magento商店給了我一個定義列表，但我希望這些列表作爲下拉（選擇/選項）的形式。我是一名jQuery培訓生......不是專業版;）如何使用jQuery更改我的HTML輸出？

所以我需要一些提示或提示。這當中的關鍵詞

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

感謝您的幫助......我只需要一個提示..一個搜索內容或某事。我怎樣操縱輸出？

來源

2013-05-06 user2310852

你需要從你的數據列表得到所有的值，然後創建一個新的HTML字符串添加到DOM。

在添加新選擇之前，您還需要刪除數據列表，因爲它們將具有相同的ID。

如何添加選擇將取決於您的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

來源

2013-05-06 16:52:30 cfs

感謝您的幫助。我拿你的sk and，做一些改變..我有3

，現在我試着把它們分開..這是我的小提琴 http://jsfiddle.net/mobilat/Nwdnn/ – user2310852 2013-05-07 08:43:01

您可以使用$ .each遍歷您的定義列表，首先您必須使用定義列表標識來定位ol，也許可以通過find查找列表並遍歷$ .each迭代列表，您可以構造drop下來

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

來源

2013-05-06 16:40:38 Subash

這裏是我的更新Skript ..你會看到我有3個清單和我試圖它們分開。它幾乎完美。鏈接也是可點擊的。

 

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

來源

2013-05-07 08:39:01 user2310852

如何使用jQuery更改我的HTML輸出？

回答

相關問題