AJAX返回jquery循环html div

Question

我有下面的 HTML 是从 Ajax 成功返回的，到目前为止，我一直在尝试做但没有成功的是循环遍历 div 获取 div id，然后在用户单击后在 jquery 对话框上为每个按钮创建一个按钮按钮 div 中的 HTML 将应用于表单。

下面的代码有效，但我必须过滤掉每个按钮的内容，但并不总是相同数量的 div，一个人可能没有，另一个人可能有 5 个

我尝试过使用 jquery.each

我想有人会知道如何循环思考这些 div 并为每个 div 创建一个按钮变量

HTML

<div class="target" id="1" >
        <p id="A1">04:00</p>
        <p id="A2">15:00</p>
        <p id="A3">00:16</p>
        <p id="A4">2</p>
        <p id="A5">10</p>
        <p id="A6">2</p>
        <p id="A7">10.73</p>
        <p id="A8">430.01</p>
        <p id="A9">0</p>
        <p id="NS">0</p>
        <p id="A10">0</p>
        <p id="A11" >0.73</p>
        <p id="B1" >448</p>
        <p id="B2" >found</p>
</div>
<div class="target" id="2" >
        <p id="A1">05:00</p>
        <p id="A2">13:00</p>
        <p id="A3">00:25</p>
        <p id="A4">3</p>
        <p id="A5">10</p>
        <p id="A6">2</p>
        <p id="A7">7.58</p>
        <p id="A8">263.71</p>
        <p id="A9">0</p>
        <p id="NS">0</p>
        <p id="A10">0</p>
        <p id="A11" >0.00</p>
        <p id="B1" >447</p>
        <p id="B2" >found</p>
</div>
<div class="target" id="3" >
        <p id="A1">05:00</p>
        <p id="A2">12:00</p>
        <p id="A3">01:00</p>
        <p id="A4">3</p>
        <p id="A5">06</p>
        <p id="A6">2</p>
        <p id="A7">6.00</p>
        <p id="A8">265.62</p>
        <p id="A9">0</p>
        <p id="NS">0</p>
        <p id="A10">0</p>
        <p id="A11" >0.00</p>
        <p id="B1" >446</p>
        <p id="B2" >found</p>
</div>

JQUERY

   success:function(html){

var button1 = {
     text: "Edit "+$($(html).filter('#1').html()).filter('#A1').text(),click: function() {
                                var start = $($(html).filter('#1').html()).filter('#A1').text();
                                $("#start").val(start);
                                var finish = $($(html).filter('#1').html()).filter('#A2').text();
                                $("#finish").val(finish);
                                var breaktime = $($(html).filter('#1').html()).filter('#A3').text();
                                $("#break").val(breaktime);
                                var grade = $($(html).filter('#1').html()).filter('#A4').text();
                                $("#grade").val(grade);
},
var button2 = {
     text: "Edit "+$($(html).filter('#2').html()).filter('#A1').text(), click: function() { 
                                var start = $($(html).filter('#2').html()).filter('#A1').text();
                                $("#start").val(start);
                                var finish = $($(html).filter('#2').html()).filter('#A2').text();
                                $("#finish").val(finish);
                                var breaktime = $($(html).filter('#2').html()).filter('#A3').text();
                                $("#break").val(breaktime);
                                var grade = $($(html).filter('#2').html()).filter('#A4').text();
                                $("#grade").val(grade);
},
          }

Answer 1

在这种情况下，最好使用对象来定义数据。这样做应该会使您在处理数据方面的生活变得更加轻松。清理完您的代码后，我想出了以下对象，它只需要您将 html 作为字符串传递给它，并将目标的 id 选择器传递给它。我不是 100% 肯定这会开箱即用，但它应该。这里还有一个fiddle 来演示

var dataObject = function(html, id) {
    this.start = $(html).find(id).find('#A1').text();
    this.finish = $(html).find(id).find('#A2').text();
    this.breaktime = $(html).find(id).find('#A3').text();
    this.grade = $(html).find(id).find('#A4').text();
};

要实例化它并获取数据，只需执行以下操作

var button = new dataObject(html, "#1");
var temp_start = button.start
var temp_finish = button.finish

这种做法在mozilla developer network有深入的解释