Question

我有一个包含data-seat和data-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)

另外，按行号排序。我怎么能这样做？
谢谢。 DEMO

Answer 1

这是代码

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/

Answer 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/

Answer 3

您需要使用另一个变量来存储行，并相应地进行格式化。

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/

Answer 4

这可以通过对现有代码稍作修改来实现，以使用数组;然后使用这些数组构建一个字符串：

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);

Demo

Answer 5

我只是这样做：

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);

FIDDLE

从属性获取文本并格式化它

5 个答案: