Question

我正在尝试将包含一组div.field（s）的每个对象换行为父div .row。 Jquery只允许我在同一行上打开和关闭父div。请帮忙！

  $(document).ready(function(){
    $.getJSON('WF-XML.php', function(data) {

        JSON.stringify(data);
        var prevCardCode = '';

        $.each( data, function(index, element){

            if (!(element['CardCode'] == prevCardCode)) {

                var sum = element['payment_sum'];

                    $('#showdata').append('<div class="row"><div class="field">' + sum + '</div>');
                }
                prevCardCode = element['CardCode'];

                $.each(element, function(i, element_detail){
                    if (!(i == 'InvKey' || i == 'PostDate' || i == 'City' || i == 'Objtype' || i == 'Block' || i == 'ZipCode' || i == 'Address' || i == 'payment_sum' || i == 'State1' || i == 'Country' || i == 'NumAtCard')) {
                        var detail = element_detail;
                        $('#showdata').append('<div class="field">' + detail + '</div>');
                    }

                });

           });
    });

});

PHP

  if (($handle = fopen('upload/BEN-new.csv', "r")) === FALSE) {
    die('Error opening file'); 
 }

 $headers = fgetcsv($handle, 1024, ',');
 $complete = array();

      while ($row = fgetcsv($handle, 1024, ",")) {
       $complete[] = array_combine($headers, $row);
        }
    fclose($handle);

    echo json_encode($complete);

以下是数据：

 {"InvKey":"11704","CardCode":"1611704", "payment_sum": "1055.40"},
 {"InvKey":"11703","CardCode":"1611703", "payment_sum": "550.00"}

它的打印方式如下：

 <div class="row">
      div class="field">1055.40</div>
 </div>
 <div class="field">1611704</div>
 <div class="row">
 <div class="field">550.00</div>
 </div>
 <div class="field">1611703</div>

我希望它像这样打印：

  <div class="row">
      <div class="field">1055.40</div>
      <div class="field">1611704</div>
  </div>
  <div class="row">
      <div class="field">550.00</div>
      <div class="field">1611703</div>
  </div>

Answer 1

尝试将<div class="field">元素添加到<div class="row">元素。像这样：

$(document).ready(function() {
    $.getJSON('WF-XML.php', function(data) {

        JSON.stringify(data); // NOTE: This doesn't do anything!!
        var prevCardCode = '';
        var newDiv;

        $.each(data, function(index, element) {
            if (element['CardCode'] != prevCardCode) {
                newDiv = $('<div class="row">').appendTo('#showdata');
                var sum = element['payment_sum'];
                $('.field').before(newDiv);
                $(newDiv).append('<div class="field">' + sum + '</div>');
            }
            prevCardCode = element['CardCode'];

            $.each(element, function(i, element_detail) {
                switch (i) {
                    case 'InvKey':
                    case 'PostDate':
                    case 'City':
                    case 'Objtype':
                    case 'Block':
                    case 'ZipCode':
                    case 'Address':
                    case 'payment_sum':
                    case 'State1':
                    case 'Country':
                    case 'NumAtCard':
                        // Do nothing
                        break;

                    default:
                        $(newDiv).append('<div class="field">' + element_detail + '</div>');
                        break;
                }
            });
        });
    });
});

我还在几个地方清理了你的代码（固定缩进并使你的长条件更容易阅读）。

另一种方法是构建一个字符串，其中包含要插入到文档中的HTML，而不是在构建整个字符串之前使用jQuery。只要你说$('<div>')，jQuery就会在内存中创建一个div元素。如果你想把东西放在创建的元素中，你必须将它们放在其中。

Answer 2

很难肯定地说，但我认为你想要这样的东西：

$(function() {
    $.getJSON('WF-XML.php', function(data) {
        var prevCardCode = '';
        $.each( data, function(index, element){
            if (element['CardCode'] !== prevCardCode) {
                //var newDiv = $('<div/>').addClass('row').appendTo('#showdata');
                var newDiv = $('<div class="rowGroup"><div class="row"></div></div>').appendTo('#showdata').find('.row');
                $('<div class="field">' + element['payment_sum'] + '</div>').appendTo(newDiv);
                $.each(element, function(key, val) {
                    if (key !== 'InvKey' && key !== 'PostDate' && key !== 'payment_sum') {
                        $('<div class="field">' + val + '</div>').appendTo(newDiv);
                    }
                });
                prevCardCode = element['CardCode'];
            }
        });
    });
});

Jquery Wrap在$ .each中使用父div进行div

2 个答案: