javascript - 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 中有深入解释。