Question

我正在尝试根据数据attr对相似的项目进行分组，在分组时，它应该显示从每个项目的数据attr中提取的两个标题。

到目前为止，我可以获得一个标题（组名）但无法附加第二个标题（类型名称）。

任何帮助都会非常感激。

示例：尝试实现以下

GROUP
TYPE
item 1
item 2
item 3

GROUP
TYPE
item 1
item 2
item 3

jQuery(function ($) {
var $list = $('#group');
    var lists = {};
    var $newLists = $();

    $list.children().each( function () {
        var group = $( this ).data('group');
        if (!lists[group]) lists[group] = [];
        lists[group].push(this);
    });

    $.each( lists, function (group, items) {
        var $newList = $('<div class="row"/>').append(items).prepend("<h3>"+ group +"</h3>");
        $newLists = $newLists.add($newList);
    });

    $list.replaceWith($newLists);  
	
	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="group">

<div data-group="GROUP A" data-type="Construction">
 	<div>item 1</div>
</div>

<div data-group="GROUP A" data-type="Construction">
 	<div>item 2</div>
</div>
<div data-group="GROUP A" data-type="Construction">
 	<div>item 3</div>
</div>
<div data-group="GROUP A" data-type="Construction">
 	<div>item 4</div>
</div>
<div data-group="GROUP A" data-type="Construction">
 	<div>item 5</div>
</div>

<div data-group="GROUP B" data-type="Finance">
 	<div>item 1</div>
</div>

<div data-group="GROUP B" data-type="Finance">
 	<div>item 2</div>
</div>
<div data-group="GROUP B" data-type="Finance">
 	<div>item 3</div>
</div>
<div data-group="GROUP B" data-type="Finance">
 	<div>item 4</div>
</div>
<div data-group="GROUP B" data-type="Finance">
 	<div>item 5</div>
</div>

</div>

Answer 1

可能的解决方法是

jQuery(function ($) {
var $list = $('#group');
    var lists = {};
    var $newLists = $();

    $list.children().each( function () {
        var group = $( this ).data('group');
        if (!lists[group]) lists[group] = [];
        lists[group].push(this);
    });

    $.each( lists, function (group, items) {
        var $newList = $('<div class="row"/>').append(items).prepend("<h3>"+ group +"</h3>" 
        +"<h3>"+
        $(this).attr("data-type") + "</h3>"
        
        );
        $newLists = $newLists.add($newList);
    });

    $list.replaceWith($newLists);  
	
	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="group">

<div data-group="GROUP A" data-type="Construction">
 	<div>item 1</div>
</div>

<div data-group="GROUP A" data-type="Construction">
 	<div>item 2</div>
</div>
<div data-group="GROUP A" data-type="Construction">
 	<div>item 3</div>
</div>
<div data-group="GROUP A" data-type="Construction">
 	<div>item 4</div>
</div>
<div data-group="GROUP A" data-type="Construction">
 	<div>item 5</div>
</div>

<div data-group="GROUP B" data-type="Finance">
 	<div>item 1</div>
</div>

<div data-group="GROUP B" data-type="Finance">
 	<div>item 2</div>
</div>
<div data-group="GROUP B" data-type="Finance">
 	<div>item 3</div>
</div>
<div data-group="GROUP B" data-type="Finance">
 	<div>item 4</div>
</div>
<div data-group="GROUP B" data-type="Finance">
 	<div>item 5</div>
</div>

</div>

Answer 2

以下是我为这样的要求编写代码的方法。

使用$("#group > div")
迭代这些div，如果前一个类型或组值与当前值不匹配，请在div之前插入h3组或h4类型。

这会压缩代码。以下是您的代码使用此逻辑的外观：

var previousGroup = "";
var previousType = "";

$("#group > div").each(function() {
    var group = $(this).data("group");
    var type = $(this).data("type");

    if(previousGroup != group) {
        $(this).before("<h3>" + group + "</h3>");
        previousGroup = group;
    }

    if(previousType != type) {
        $(this).before("<h4>" + type + "</h4>");
        previousType = type;
    }
});

jQuery(function($) {
  var previousGroup = "";
  var previousType = "";

  $("#group > div").each(function() {
    var group = $(this).data("group");
    var type = $(this).data("type");
    
    if(previousGroup != group) {
      $(this).before("<h3>" + group + "</h3>");
      previousGroup = group;
    }
    
    if(previousType != type) {
      $(this).before("<h4>" + type + "</h4>");
      previousType = type;
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="group">

  <div data-group="GROUP A" data-type="Construction">
    <div>item 1</div>
  </div>

  <div data-group="GROUP A" data-type="Construction">
    <div>item 2</div>
  </div>
  <div data-group="GROUP A" data-type="Construction">
    <div>item 3</div>
  </div>
  <div data-group="GROUP A" data-type="Construction">
    <div>item 4</div>
  </div>
  <div data-group="GROUP A" data-type="Construction">
    <div>item 5</div>
  </div>

  <div data-group="GROUP B" data-type="Finance">
    <div>item 1</div>
  </div>

  <div data-group="GROUP B" data-type="Finance">
    <div>item 2</div>
  </div>
  <div data-group="GROUP B" data-type="Finance">
    <div>item 3</div>
  </div>
  <div data-group="GROUP B" data-type="Finance">
    <div>item 4</div>
  </div>
  <div data-group="GROUP B" data-type="Finance">
    <div>item 5</div>
  </div>

</div>

jQuery将类似项目与标题组合在一起

2 个答案: