Question

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

希望这会有所帮助:) 我只是将类添加到了span中，因此您可以考虑将其添加到父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>

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

2 个答案: