Onclick將UL轉換爲JSON

Question

在我的網頁上，我有一個總結多個商店的區域。每個商店都是一個包含多個列表項的列表。

  <div id="dealersList" class="dealer-summary"> 
      <ul class="dealer-summary-list"> 
       <li class="dealerName">Brecksville</li> 
       <li class="dealer-summary-listItem">8383 Chippewa Rd.,</li> 
       <li class="dealer-summary-listItem">Brecksville, Ohio - 44141</li> 
       <li class="dealer-summary-listItem">(440) 740-0535</li> 
      </ul> 
      <ul class="dealer-summary-list"> 
       <li class="dealerName">Dayton</li> 
       <li class="dealer-summary-listItem">3520 W Siebenthaler Ave.,</li> 
       <li class="dealer-summary-listItem">Dayton, Ohio - 45406</li> 
       <li class="dealer-summary-listItem">(937) 567-9578</li> 
      </ul> 
      <ul class="dealer-summary-list"> 
       <li class="dealerName">Cleveland</li> 
       <li class="dealer-summary-listItem">900 Euclid Ave.,</li> 
       <li class="dealer-summary-listItem">Cleveland, Ohio - 44115</li> 
       <li class="dealer-summary-listItem">(216) 302-3020</li> 
      </ul> 
      <ul class="dealer-summary-list"> 
       <li class="dealerName">Bridgetown</li> 
       <li class="dealer-summary-listItem">5830 Harrison Ave.,</li> 
       <li class="dealer-summary-listItem">Cincinnati, Ohio - 45248</li> 
       <li class="dealer-summary-listItem">(513) 574-2810</li> 
      </ul> 
      <ul class="dealer-summary-list"> 
       <li class="dealerName">Columbus</li> 
       <li class="dealer-summary-listItem">1350 N High St.,</li> 
       <li class="dealer-summary-listItem">Columbus, Ohio - 43201</li> 
       <li class="dealer-summary-listItem">(614) 294-2545</li> 
      </ul> 
      <ul class="dealer-summary-list"> 
       <li class="dealerName">Toledo</li> 
       <li class="dealer-summary-listItem">1415 S Byrne Rd.,</li> 
       <li class="dealer-summary-listItem">Toledo, Ohio - 43614</li> 
       <li class="dealer-summary-listItem">(419) 382-0792</li> 
      </ul> 
     </div> 
    </div> 

我想點擊任意目錄，並將它轉換成JSON與此類似

對象 地址：「8383齊佩瓦路。」 區域：「布雷克斯維爾，俄亥俄州 - 44141」 電話： 「（440）740-0535」 標題：

我和不正確的結果試了多次 「布雷克斯維爾」 ......

  var dealerSummary = []; 
    $("ul.dealer-summary-list > li").each(function() { 
     dealerSummary.push({ 
      "title": $(this).text(), 
      "address": $(this).text(), 
      "locale": $(this).text(), 
      "phone":$(this).text() 
     }); 
    }) 

只有被點擊的項目應該被轉換。請幫忙。

Answer 1

假設你li標籤總是以相同的順序：名稱，住所，現場，電話，你可以用一個簡單的find()做到這一點，然後串聯的li的文本對象。

下面是一個例子：

$("#dealersList").on("click", "ul", function() { 
 
    var obj = {}; 
 
    var items = $(this).find("li"); 
 
    
 
    obj.title = items.eq(0).text(); 
 
    obj.address = items.eq(1).text(); 
 
    obj.locale = items.eq(2).text(); 
 
    obj.phone = items.eq(3).text(); 
 
    
 
    console.log(obj); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="dealersList" class="dealer-summary"> 
 
    <ul class="dealer-summary-list"> 
 
    <li class="dealerName">Brecksville</li> 
 
    <li class="dealer-summary-listItem">8383 Chippewa Rd.,</li> 
 
    <li class="dealer-summary-listItem">Brecksville, Ohio - 44141</li> 
 
    <li class="dealer-summary-listItem">(440) 740-0535</li> 
 
    </ul> 
 
    <ul class="dealer-summary-list"> 
 
    <li class="dealerName">Dayton</li> 
 
    <li class="dealer-summary-listItem">3520 W Siebenthaler Ave.,</li> 
 
    <li class="dealer-summary-listItem">Dayton, Ohio - 45406</li> 
 
    <li class="dealer-summary-listItem">(937) 567-9578</li> 
 
    </ul> 
 
    <ul class="dealer-summary-list"> 
 
    <li class="dealerName">Cleveland</li> 
 
    <li class="dealer-summary-listItem">900 Euclid Ave.,</li> 
 
    <li class="dealer-summary-listItem">Cleveland, Ohio - 44115</li> 
 
    <li class="dealer-summary-listItem">(216) 302-3020</li> 
 
    </ul> 
 
    <ul class="dealer-summary-list"> 
 
    <li class="dealerName">Bridgetown</li> 
 
    <li class="dealer-summary-listItem">5830 Harrison Ave.,</li> 
 
    <li class="dealer-summary-listItem">Cincinnati, Ohio - 45248</li> 
 
    <li class="dealer-summary-listItem">(513) 574-2810</li> 
 
    </ul> 
 
    <ul class="dealer-summary-list"> 
 
    <li class="dealerName">Columbus</li> 
 
    <li class="dealer-summary-listItem">1350 N High St.,</li> 
 
    <li class="dealer-summary-listItem">Columbus, Ohio - 43201</li> 
 
    <li class="dealer-summary-listItem">(614) 294-2545</li> 
 
    </ul> 
 
    <ul class="dealer-summary-list"> 
 
    <li class="dealerName">Toledo</li> 
 
    <li class="dealer-summary-listItem">1415 S Byrne Rd.,</li> 
 
    <li class="dealer-summary-listItem">Toledo, Ohio - 43614</li> 
 
    <li class="dealer-summary-listItem">(419) 382-0792</li> 
 
    </ul> 
 
</div>

Answer 2

可以在所有的UL添加事件偵聽器，然後只需創建具有所需性能的假設李順序不會改變的對象。

var uls = document.querySelectorAll('.dealer-summary-list'); 
var obj = {}; 
uls.forEach(function(ul){ 
    ul.addEventListener('click', function(){ 
     var lis = ul.querySelectorAll('li'); 

      obj.address = lis[1].innerText; 
      obj.locale = lis[2].innerText; 
      obj.phone = lis[3].innerText; 
      obj.title = lis[0].innerText; 
     console.log(JSON.stringify(obj)); 
    }); 
});