javascript - 如何按属性值创建组检查元素

Question

我正在尝试识别具有相同文本的几组元素。检查我是否使用内容的哈希创建元素数据代码以进行比较。

我想将具有相同内容的不同元素分组。示例:

Name    |   Message<br>
Mike    |   This is the same message    GROUP 1 -> show button<br>
John    |   This is the same message    GROUP 1<br>
Millie  |   This is the same message    GROUP 1<br>
Steve   |   This is the same messages   GROUP 2 -> show button<br>
Michael |   This is the same message    GROUP 1<br>
Alfredo |   This is the same messages   GROUP 2<br>
Paul    |   Totally different message<br>

var found = {};

		$('*[data-code]').each(function(i,el){

			var $this = $(this);
			var same = $this.attr("data-code");



			if(found[same]){				
				$this.css('color', 'yellow');					        
		    }else{
		        found[same] = true;
		    }
		  
		});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="messages-list-table">
	<tr>
		<th class="message-name">Name</th>
		<th class="message-body">Message</th>
  </tr>  
  <tr id="1">
	  <td class="message-name">Mike</td>
    <td class="message-body" data-code="5652c0bcc277bf4c039686d">This is the same message</td>
  </tr>
  <tr id="2">
	  <td class="message-name">John</td>
    <td class="message-body" data-code="5652c0bcc277bf4c039686d">This is the same message</td>
  </tr>
  <tr id="3">
	  <td class="message-name">Steve</td>
    <td class="message-body" data-code="725c1424b123dabc3">This is the same messages</td>
  </tr>
  <tr id="5">
	  <td class="message-name">Michael</td>
    <td class="message-body" data-code="5652c0bcc277bf4c039686d">This is the same message</td>
  </tr>
  <tr id="6">
	  <td class="message-name">Alfredo</td>
    <td class="message-body" data-code="725c1424b123dabc3">This is the same messages</td>
  </tr>
  <tr id="8">
	  <td class="message-name">Paul</td>
    <td class="message-body" data-code="8cbsh7364hd94d8">Totally different message</td>
  </tr>

  
</table>

我的代码: http://jsfiddle.net/bfeujdLc/

Answer 1

尝试以这种方式实现您的代码。

// js to generate array for all data-code
		var codeList = [];
		$('*[data-code]').each(function(a, el){
			var code = $(el).data('code');
			codeList.push(code);
		});
		// Js to find only duplicate values from array of all data-code 
		var duplicateOnly = [];
		duplicateOnly = codeList.filter((b, c, bb) => bb.indexOf(b) === c && bb.lastIndexOf(b) !== c);
		// js to generate random color code list as per new array length
		var colorCodeList = [];
		for(var code in duplicateOnly){
			var letters = '0123456789ABCDEF';
			var color = '#';
			for (var d = 0; d < 6; d++)
				color += letters[Math.floor(Math.random() * 16)];
			colorCodeList.push(color);
		}
		// js to apply color to all groups
		for ( var e = 0; e < duplicateOnly.length; e++ ){
			$('*[data-code]').each(function(a, el){
				var code = $(el).data('code');
				if (code == duplicateOnly[e])
					$(el).css({'color': colorCodeList[e]});
			});
		}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<table class="messages-list-table">
  <tr>
    <th class="message-name">Name</th>
    <th class="message-body">Message</th>
  </tr>  
  <tr id="1">
    <td class="message-name">Mike</td>
    <td class="message-body" data-code="5652c0bcc277bf4c039686d">This is the same message</td>
  </tr>
  <tr id="2">
    <td class="message-name">John</td>
    <td class="message-body" data-code="5652c0bcc277bf4c039686d">This is the same message</td>
  </tr>
  <tr id="3">
    <td class="message-name">Steve</td>
    <td class="message-body" data-code="725c1424b123dabc3">This is the same messages</td>
  </tr>
  <tr id="4">
    <td class="message-name">Michael</td>
    <td class="message-body" data-code="5652c0bcc277bf4c039686d">This is the same message</td>
  </tr>
  <tr id="5">
    <td class="message-name">Alfredo</td>
    <td class="message-body" data-code="725c1424b123dabc3">This is the same messages</td>
  </tr>
  <tr id="6">
    <td class="message-name">Paul</td>
    <td class="message-body" data-code="8cbsh7364hd94d8">Totally different message</td>
  </tr>
  <tr id="7">
    <td class="message-name">Kuldip</td>
    <td class="message-body" data-code="dsdasdw4394839482384">Demo message but different from all</td>
  </tr>
</table>

此代码每次都会生成随机颜色代码。

我希望这对你有用。

注意:此代码适用于您的数据代码列表的每个长度，您不必在此代码中进行更改。

谢谢你...