如何在CSS或jQuery中获得此输出。
::first-letter或CSS is (equal to) === "Some Value e.g. ' (1)(a)(I)(2)'"获取输出background-color:red;
HTML示例：
<p>(1)</p>
<p>(a)</p>
<p>(b)</p>
<p>(2)</p>
<p>(a)</p>
<p>(i)</p>
<p>(ii)</p>
<p>(iii)</p>
输出应为：
<p>(1)</p> <--Background-color RED
<p>(a)</p> <--Background-color GREEN
<p>(b)</p> <--Background-color GREEN
<p>(2)</p> <--Background-color RED
<p>(a)</p> <--Background-color GREEN
<p>(i)</p> <--Background-color YELLOw
<p>(ii)</p> <--Background-color YELLOw
<p>(iii)</p> <--Background-color YELLOw
使用regex或substring从<p>标签中获取第一个单词。根据该文本添加类，如下所示。
var $par = $("p");
$par.each(function(index, element) {
var str = $(this).text().trim();
var i = str.indexOf(" ");
var txt = i == -1 ? str : str.substring(0, i);
if (txt == '(1)' || txt == '(2)')
$(this).addClass('red');
if (txt == '(a)' || txt == '(b)')
$(this).addClass('green');
if (txt == '(ii)' || txt == '(iii)' || txt == '(i)')
$(this).addClass('yellow')
});.red {
background-color: red;
}
.green {
background-color: green;
}
.yellow {
background-color: yellow;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
(1) 1st paragraph
(1) 1st paragraph
(1) 1st paragraph
next line
</p>
<p>(a) 2nd paragraph</p>
<p>(b)</p>
<p>(2)</p>
<p>(a)</p>
<p>(i)</p>
<p>(ii)</p>
<p>(iii)</p>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句