如何在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] 删除。
我来说两句