0

div.field親divを持つ（s）のグループを含む各オブジェクトをラップしようとしています.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>
4

2 に答える 2

0

<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要素を作成します。作成した要素の中に物を入れたい場合は、実際にその中に入れる必要があります。

于 2012-05-23T17:33:58.397 に答える
0

確かに言うのは難しいですが、私はあなたがこのようなものが欲しいと思います：

$(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'];
            }
        });
    });
});
于 2012-05-23T18:15:22.637 に答える