Question

我有这样的HTML：

<div data-suppattrtype="test1" class="testclass">
  <p>
    Hello Test1
  </p>
</div>
<div data-suppattrtype="test2" class="testclass">
  <p></p>
    <div class="LotMoreContents">
      <p>
        First Time
      </p>
      <div id="Time">
        <input type="text" id="start-time" value="123"/>
        <input type="text" id="end-time" value="456"/>
      </div>
      <p>
        Second Time
      </p>
      <div id="Time">
        <input type="text" id="start-time" value="789"/>
        <input type="text" id="end-time" value="012"/>
      </div>
    </div>

</div>

我正在努力提取各种各样的开始＆amp; div test2中存在的结束时间。我想要做的是获取所有时间并将其存储在类似于此的JSON对象中：

[{"startTime": "123", "endTime": "456"}, {"startTime":"789", "endTime": "012"}]

为此，我可以通过以下方式获取test2的innerHTML：

$( document ).ready(function () {
  var $allDivs = $(this).find(".testclass");
  $allDivs.each(function() {
    var $suppAttrType = $(this).data('suppattrtype');
    if($suppAttrType === "test2") {
        /*Parse the the time objects within test2*/
    }
  });
});

我可以通过$(this)[0]访问HTML，但我无法继续进行。

Answer 1

<强>第一

您应该只为页面唯一的元素指定id。否则，请使用class（就像我在下面的代码段中修改的那样）

id="Time"至class="Time"，id="start-time"至class="start-time"和id="end-time"至class="end-time"

<强>第二

您需要JSON.stringify()函数才能将JavaScript值转换为JSON字符串。

$( document ).ready(function () {
  var $serializedTimes = [];

  var $allDivs = $(this).find(".testclass");
  $allDivs.each(function() {
    var $suppAttrType = $(this).data('suppattrtype');
    if($suppAttrType === "test2") {
      $(this).find(".Time").each(function(){
        var startTime = $(this).find(".start-time").val();
        var endTime   = $(this).find(".end-time").val();

        $serializedTimes.push({startTime: startTime, endTime: endTime});
      });
    }
  });

  console.log(JSON.stringify($serializedTimes));
});

$(document).ready(function() {
  var serializedTimes = [];
    
  $(".testclass[data-suppattrtype='test2']").each(function(){
    $(this).find(".Time").each(function(){
      var startTime = $(this).find(".start-time").val();
      var endTime   = $(this).find(".end-time").val();
      
      serializedTimes.push({startTime: startTime, endTime: endTime});
    });
  });  
  
  console.log(JSON.stringify(serializedTimes));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-suppattrtype="test1" class="testclass">
  <p>
    Hello Test1
  </p>
</div>
<div data-suppattrtype="test2" class="testclass">
  <p></p>
    <div class="LotMoreContents">
      <p>
        First Time
      </p>
      <div class="Time">
        <input type="text" class="start-time" value="123"/>
        <input type="text" class="end-time" value="456"/>
      </div>
      <p>
        Second Time
      </p>
      <div class="Time">
        <input type="text" class="start-time" value="789"/>
        <input type="text" class="end-time" value="012"/>
      </div>
    </div>

</div>

使用Jquery从div标签解析数据

1 个答案: