将类添加到包含狗 1 和介于两者之间的行的 div

Question

代码是自动生成的，所以我无法通过添加HTML来添加类/id等，所以我尝试使用js执行此操作。我截断了内容，但基本上我想将类"dog1"添加到与狗 1 相关的行中，将类"dog2"添加到与狗 2 相关的行中。

我尝试使用附加代码段中的脚本：

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

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

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

Answer 1

希望这对:)有所帮助我只将类添加到跨度中，因此您可以考虑将其添加到父div;此外，有些div 不包含"Dog *"模式，因此您可能需要考虑另一种方法;

稍后编辑：正则表达式无法匹配中间的行，因此您可能需要考虑按起始列和结束列拆分数据("名称"列可能是起始列，"过敏"可能是结束列(

const $dogSpans = $('span:contains("Dog")');
$dogSpans.each((i, span) => {
   matches = $(span).html().toString().match( /Dog [0-9]*/); //may find more than one match
   match = matches[0].toLowerCase(); //we only consider the first match (and we lowercase it)
   matchedClass = match.replace(/s/g, ''); //we remove spaces to obtain a class name
   $(span).addClass(matchedClass);
})

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

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

Answer 2

:contains()语法很糟糕，一团糟。一种不太容易出错的方法是使用 .text() 提取每个div 的文本内容，然后使用 .includes() 查看是否存在特定的子字符串。此外，如果运行.each()则从比目标元素高一个级别开始，如果需要所有后代，请使用.find()，如果需要直接后代，请使用.children()。

$(ancestor element(s)).find(target elements).each(...

获取嵌套在祖先元素中的每个匹配元素

$(ancestor element(s)).children(target elements).each(...

获取直接嵌套在祖先元素中的每个匹配元素

$(function() {
  $(document).find('div').each(function() {
    let txt = $(this).text();
    if (txt.includes('Dog 1')) {
      $(this).addClass('dog1');
    }
    if (txt.includes('Dog 2')) {
      $(this).addClass('dog2');
    }
  });
});

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

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