JavaScript 比较两个具有相同 ID 的 <div> 元素，并在它们的内容不同时设置它们的样式答案

【问题标题】：JavaScript to compare two <div> elements with same ID and style them if their contents are differentJavaScript 比较两个具有相同 ID 的 <div> 元素，并在它们的内容不同时设置它们的样式
【发布时间】：2019-09-16 02:15:53
【问题描述】：

我需要使用 JavaScript 来动态设置 PHP 应用程序的输出样式，该应用程序并排显示产品信息以进行比较（我无法编辑此 PHP 应用程序）。

每个产品的字段都获得相同的 ID（即，如果比较两个产品，我会得到两个具有相同 ID 的 s，cf1 到 cf5）。

我尝试使用 querySelectorAll 来获取 ID 出现的数组，然后遍历它们并比较它们，但没有得到任何结果。

HTML：

<div class="inner">
  <div class="comparison-div half" id="product-comparison-11">
    <div class="cf field" id="cf-1">
      <div class="cf-label label">Field 1 label:</div>
      <div class="cf-value value">Field 1 value</div>
    </div>
    <div class="cf field" id="cf-2">
      <div class="cf-label label">Field 2 label:</div>
      <div class="cf-value value">Field 2 unique value A</div>
    </div>
  </div>


  <div class="comparison-div half" id="product-comparison-15">
    <div class="cf field" id="cf-1">
      <div class="cf-label label">Field 1 label:</div>
      <div class="cf-value value">Field 1 value</div>
    </div>
    <div class="cf field" id="cf-2">
      <div class="cf-label label">Field 2 label:</div>
      <div class="cf-value value">Field 2 unique value B</div>
    </div>
  </div>

</div>

JS：

var cf1 = document.querySelectorAll("div#cf-1");
var cf2 = document.querySelectorAll("div#cf-2");

for (var i = 0, max = cf1.length; i < max; i++) {
  if (Object.is(cf1[i], cf1[i++]) == false) {
    cf1[i--].style.backgroundColor = "red";
    cf1[i].style.backgroundColor = "red";
  }
}

for (var i = 0, max = cf2.length; i < max; i++) {
  if (Object.is(cf2[i], cf2[i++]) == false) {
    cf2[i--].style.backgroundColor = "red";
    cf2[i].style.backgroundColor = "red";
  }
}

JSFiddle：http://jsfiddle.net/coisos/j45p0adt/

我希望 cf2 获得红色背景，因为每次出现的内容都不同。相反，似乎代码没有效果。

【问题讨论】：

ID 必须是唯一的。改用一个类。
两个元素不能有相同的ID
Object.is(cf1[i], cf1[i++]) 两个不同的对象总是不同的。
@Keith 你错过了 id 的意义——它用于识别某些东西，所以必须是唯一的，如果你验证你的代码并且有重复的 id，它就会被归类为无效，所以你真的不应该不要这样做——仅仅因为你不能做到这一点
@Keith "id: ... 不得文档中的多个元素具有相同的 id 值..." ( Source)

标签： javascript

【解决方案1】：

2 个问题..

两个不同的对象永远不会相等，甚至。 Object.is({},{}) 是假的。
cf1[i++]，这将在您的索引后增加，++i 将是您的后继。

所以另一个想法是获取 innerText，这是一个字符串，字符串比较将按预期工作..

if (cf1[i].innerText !== cf1[++i].innerText) {

更新小提琴 -> http://jsfiddle.net/jbv5ywam/

【讨论】：

谢谢，我知道我的代码中至少有一个非常愚蠢的错误。
这似乎只捕获具有不同值的字段的第一次出现：如果两个字段不同，则只有第一个被突出显示。
@Xhiko 如果您查看控制台，您会看到错误，问题是您将最后一个与上一个进行比较，但您的循环太过分了。我更新了小提琴，也去掉了++i's 等，因为它们只是混淆了事情。

【解决方案2】：

对于这个 Jquery

$(document).ready(function(){
  var $source = $("#product-comparison-11");
  var $target = $("#product-comparison-15");
  
  $target.find("[data-field]").each(function(i, item){
    var field = $(this).data("field");
    
    if($source.find("[data-field='"+ field +"'] .value").html() !== $(item).find(".value").html()){
      $(item).addClass("red")
    }
    
  })
})

.half {
  width: 48%;
  margin: 32px 1%;
  position: relative;
  float: left;
}

.label {
  color: #333;
  width: 25%;
  border-right: solid 1px #ccc;
  font-weight: 600;
  text-align: left;
  background-color: #fbfbff;
  border-bottom: solid 1px #ccc;
  min-width: 159px;
  display: table-cell;
  vertical-align: middle;
}

.value {
  color: #333;
  width: 75%;
  text-align: left;
  overflow: auto;
  display: table-cell;
  vertical-align: middle;
}

.field {
  clear: both;
  position: relative;
  width: 100%;
  border: 1px solid #ccc;
  display: table;
  line-height: 1.2;
  font-size: 95%;
  border-collapse: collapse;
}

.red{
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="inner">
  <div class="comparison-div half" id="product-comparison-11">
    <div class="cf field" data-field="cf-1">
      <div class="cf-label label">Field 1 label:</div>
      <div class="cf-value value">Field 1 value</div>
    </div>
    <div class="cf field" data-field="cf-2">
      <div class="cf-label label">Field 2 label:</div>
      <div class="cf-value value">Field 2 unique value A</div>
    </div>
  </div>


  <div class="comparison-div half" id="product-comparison-15">
    <div class="cf field" data-field="cf-1">
      <div class="cf-label label">Field 1 label:</div>
      <div class="cf-value value">Field 1 value</div>
    </div>
    <div class="cf field" data-field="cf-2">
      <div class="cf-label label">Field 2 label:</div>
      <div class="cf-value value">Field 2 unique value B</div>
    </div>
  </div>

</div>

【讨论】：

感谢您的回答，但我现在宁愿避免使用 jQuery。

【解决方案3】：

您在使用 ++ 运算符时出错。比较 cf[i] 和 cf[i++] 将始终为真，如果将 ++ 运算符放在变量之后，则在当前使用之后递增值。与您的 -- 运算符相同。所以如果您希望增量发生在适当的位置，您应该将它放在变量之前，例如 ++i

【讨论】：