2

我有一个带有data-seatanddata-row属性的 div 元素：

<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 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 回答
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 回答