Question

代码是自动生成的，因此我无法通过添加HTML添加类/ id等，因此我尝试使用js来实现。我删节了内容，但基本上我想将“ dog1”类添加到与Dog 1有关的行中，并将“ dog2”类添加到与Dog 2有关的行中。

<table>
<tr><td><span>Dog 1 Name</span></td></tr>
<tr><td><span>Dog 1 Age</span></td></tr>
<tr><td><span>Dog 1 Weight</span></td></tr>
<tr><td><span>Date of last appointment</span></td></tr>
<tr><td><span>Dog 1 Number</span></td></tr>
<tr><td><span>Acceptance</span></td></tr>
<tr><td><span>Dog 1 Allergies</span></td></tr>
<tr><td><span>Dog 2 Details</span></td></tr>
<tr><td><span>Dog 2 Name</span></td></tr>
<tr><td><span>Dog 2 Name</span></td></tr>
<tr><td><span>Dog 2 Age</span></td></tr>
<tr><td><span>Dog 2 Weight</span></td></tr>
<tr><td><span>Date of last appointment</span></td></tr>
<tr><td><span>Dog 2 Number</span></td></tr>
<tr><td><span>Acceptance</span></td></tr>
<tr><td><span>Dog 2 Allergies</span></td></tr>
</table>

所以我尝试使用：

$('span:contains("Dog 1").closest('tr').addClass('dog1');

但是问题是有些行中不包含“ Dog 1”（例如：接受，最后一次约会的日期）

关于如何也抓住这些建议吗？

Answer 1

找到表中包含与Dog 1跨度的所有tr。
对于每行，如果其中包含Dog 1，Dog 2，Dog 3：将class属性设置为“ dog1”，“ dog2”，“ dog3”，...

let dogCounter = 1;
let classAttribute = '';
const $trs = $('span:contains("Dog 1")').first().closest('table').find('tr');

$trs.each((i, tr) => {
  const selector = 'span:contains("Dog '+dogCounter+'")';
  if ($(tr).find(selector).length) {
  	classAttribute = 'dog'+dogCounter;
    dogCounter++;
  }
  $(tr).addClass(classAttribute);
})

.dog1 {
  color: red;
}
.dog2 {
  color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr><td><span>Dog 1 Name</span></td></tr>
<tr><td><span>Dog 1 Age</span></td></tr>
<tr><td><span>Dog 1 Weight</span></td></tr>
<tr><td><span>Date of last appointment</span></td></tr>
<tr><td><span>Dog 1 Number</span></td></tr>
<tr><td><span>Acceptance</span></td></tr>
<tr><td><span>Dog 1 Allergies</span></td></tr>
<tr><td><span>Dog 2 Details</span></td></tr>
<tr><td><span>Dog 2 Name</span></td></tr>
<tr><td><span>Dog 2 Name</span></td></tr>
<tr><td><span>Dog 2 Age</span></td></tr>
<tr><td><span>Dog 2 Weight</span></td></tr>
<tr><td><span>Date of last appointment</span></td></tr>
<tr><td><span>Dog 2 Number</span></td></tr>
<tr><td><span>Acceptance</span></td></tr>
<tr><td><span>Dog 2 Allergies</span></td></tr>
</table>

将类添加到包含Dog 1及其之间的行的表行中

1 个答案: