javascript - 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 Chippewa Rd.”区域设置:“俄亥俄州布雷克斯维尔 - 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>