Question

在我的网页上，我有一个总结了多家商店的区域。每个商店都是一个包含多个列表项的列表。

Guid.Empty

我想点击任何列表并将其转换为类似于此

的JSON

对象地址：＆＃34; 8383 Chippewa Rd。，＆＃34; locale：＆＃34; Brecksville，Ohio - 44141＆＃34; 电话：＆＃34;（440）740-0535＆＃34; 标题：＆＃34;布雷克斯维尔＆＃34;

我多次尝试过不正确的结果......

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

只应转换点击的项目。请帮忙。

Answer 1

假设您的li代码始终采用相同的顺序：标题，地址，区域设置，手机，您可以使用简单的find()执行此操作，然后连接li的文本成对象。

以下是一个例子：

＆＃13;

$("#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);
});

＆＃13;

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

＆＃13;

Answer 2

您可以在所有ul上添加事件侦听器，然后只需创建一个具有所需属性的对象，假设li顺序不会更改。

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

Onclick将UL转换为JSON

2 个答案: