如何獲取屬性的PHP HTML簡單的分析？

Question

我提前道歉，但我的英語不是最強的。 我有這樣的代碼：

<div id="divColourImages"> 
    <ul id="ulColourImages" class="colourImages">` 

     <li id="cvli12003003" title="Click to select Black/Charcoal" colvar-id="12003003" data-text="Black/Charcoal" class="tooltip colorImgli variantHighlight"> 
      <a href="#"> 
       <img src="http://images.sportsdirect.com/images/products/12003003_bs.jpg" alt="colour"> 
      </a> 
     </li> 

     <li id="cvli12003004" title="Click to select Chalk/Black" colvar-id="12003004" data-text="Chalk/Black" class="tooltip colorImgli"> 
      <a href="#"> 
       <img src="pic0.jpg" alt="colour"> 
      </a> 
     </li> 

     <li id="cvli12003022" title="Click to select Navy/White" colvar-id="12003022" data-text="Navy/White" class="tooltip colorImgli">` 
      <a href="#"> 
       <img src="pic1.jpg" alt="colour"> 
      </a> 
     </li> 
     <li id="cvli12003037" title="Click to select White/Navy" colvar-id="12003037" data-text="White/Navy" class="tooltip colorImgli"> 
      <a href="#"> 
       <img src="pic2" alt="colour"> 
      </a> 
     </li> 
    </ul> 
</div> 

我的問題是如何得到（解析）上atributes數據文本和colvor-ID的所有信息<li>和轉換。 請幫幫我！我的想法是選擇選項菜單和colvar-ID數據文本信息變化的值 樣品是：

<select> 
    <option value="12003004">Chalk/Black</option> 
    <option value="12003022">Navy/White</option> 
    <option value="12003037">White/Navy</option> 
</select> 

請幫幫我！

Answer 1

添加具有id="sel"一個空的選擇你的HTML

<select id="sel"></select> 

，然後使用jQuery：

$(document).ready(function() { 
    $('li').each(function(){ 
     // debug 
     console.log($(this).attr('colvar-id')); 
     console.log($(this).attr('data-text')); 
     console.log($(this).attr('title')); 
     // go for the select 
     $('#sel').append(
      $('<option></option>') 
       .val($(this).attr('colvar-id')) 
       .html($(this).attr('data-text'))); 
       }); 
     }); 

}); 

見jsfiddle

更新

代替鄰f使用$(li)選擇器，您也可以使用$('[id^="cvli"]')。

（所有元素，其ID也開始用 「​​cvli」。）