2

data-seatとプロパティを持つdiv要素がありdata-rowます：

<div class='selected' data-seat='1' data-row='1'></div>
<div class='selected' data-seat='2' data-row='1'></div> 
<div class='selected' data-seat='3' data-row='1'></div> 
<div class='selected' data-seat='1' data-row='2'></div>
<div class='selected' data-seat='2' data-row='2'></div>

選択した座席にわかりやすいメッセージを印刷したい：

var  selectedPlaceTextFormated =''; 
$(".selected").each(function () {

        var selectedPlace = $(this);

        selectedPlaceTextFormated += "Row " + selectedPlace.attr("data-row") + " (seat " + selectedPlace.attr("data-seat") + ")\n";
    });
alert(selectedPlaceTextFormated);

このコードはうまく機能し、次のことを示しています。

Row 1 (seat 1)
Row 1 (seat 2)
Row 1 (seat 3)
Row 2 (seat 1)
Row 2 (seat 2)

しかし、私は列ごとにグループシートが必要です。つまり、次のものが必要です。

Row 1(seats: 1,2,3)
Row 2(seats: 1,2)

また、行番号で並べ替えます。これどうやってするの？
ありがとう。デモ

4

5 に答える 5

3

これがコードです

var selectedPlaceTextFormated ='';
var row_array = [];

$(".selected").each(function () {
    var selectedPlace = $(this);
    if (!row_array[selectedPlace.attr("data-row")]){
      row_array[selectedPlace.attr("data-row")] = selectedPlace.attr("data-seat");
    }
    else row_array[selectedPlace.attr("data-row")] += ','+selectedPlace.attr("data-seat");
});

for (row in row_array){
    alert("Row "+ row +"(seat " + row_array[row] + ")\n" );
}

そしてここに働くフィドルへのリンク：http：//jsfiddle.net/3gVHg/

于 2012-07-10T08:33:25.323 に答える
2

まず第一に、jQueryはdata-そのオブジェクトに属性を自動的に取得するのに十分親切data expandoです。つまり、次の方法でこれらのデータにアクセスできます。

jQueryObject.data('seat');

例えば。

あなたの実際の質問は次のように解決される可能性があります

var $selected      = $('.selected'),
    availableRows  = [ ],
    selectedPlaceTextFormated = '',
    currentRow,
    currentSeats;

 $selected.each(function(_, node) {
     if( availableRows.indexOf( currentRow = $(node).data('row') ) === -1 ) {
         availableRows.push( currentRow );
     }
 });

 availableRows.forEach(function( row ) {
     selectedPlaceTextFormated += 'Row ' + row + '(';

     currentSeats = $selected.filter('[data-row=' + row + ']').map(function(_, node) {
         return $(this).data('seat');
     }).get();

    selectedPlaceTextFormated += currentSeats.join(',') + ')\n';
 });

jsFiddle： http: //jsfiddle.net/gJFJW/3/

于 2012-07-10T08:32:19.803 に答える
1

これは、配列を使用するように既存のコードにいくつかのわずかな変更を加えることで実現できます。次に、これらの配列を使用して文字列を作成します。

var selectedPlaceTextFormated = [];
var textFormatted = '';
$(".selected").each(function(i) {

    var selectedPlace = $(this);
    var arr = [];

    selectedPlaceTextFormated[selectedPlace.attr("data-row")] += "," + selectedPlace.attr("data-seat");

});

selectedPlaceTextFormated.shift();

for (var i = 0; i < selectedPlaceTextFormated.length; i++) {
    var arr2 = selectedPlaceTextFormated[i].split(",");
    arr2.shift();
    textFormatted += "Row " + (i + 1) + " seats: (" + arr2.join(",") + ")\n";
}

alert(textFormatted);

デモ

于 2012-07-10T08:44:41.650 に答える
1

行を格納し、それに応じてフォーマットするには、別の変数を使用する必要があります。

var selectedPlaceTextFormated =''; 
var prevRow = 0;
$(".selected").each(function () {
    var selectedPlace = $(this);
    var row = selectedPlace.attr("data-row");
    var seat = selectedPlace.attr("data-seat");
    if(prevRow == row){
        selectedPlaceTextFormated += "," + seat;
    }
    else{
        if(selectedPlaceTextFormated != ''){
            selectedPlaceTextFormated += ')\n';
        }
        selectedPlaceTextFormated += "Row " + row + " (seat " + seat;
        prevRow = row;
    }

});
selectedPlaceTextFormated += ')\n';
alert(selectedPlaceTextFormated);

http://jsfiddle.net/nsjithin/R8HHC/を確認してください

于 2012-07-10T08:40:50.650 に答える
1

私はこれをするだけです：

var text = []; 
$(".selected").each(function () {
    var a = parseInt($(this).data('row'), 10),
        b = $(this).data('seat');
    text[a] = ((text[a])?text[a]+', ':'')+b;
});

var selectedPlaceTextFormated ='';
$.each(text, function(index, elem) {
    if (!this.Window) selectedPlaceTextFormated += "Row " + index + " (seat " + elem + ")\n";
});

alert(selectedPlaceTextFormated);

フィドル

于 2012-07-10T08:57:31.397 に答える