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)); 
    }); 
});