<P>の最初の単語を選択します

2020-02-14 jquery css

CSSまたはjQueryでこの出力を取得するにはどうすればよいですか。

::first-letterまたは CSS is (equal to) === "Some Value eg ' (1)(a)(I)(2)'"出力値を取得するためのCSS is (equal to) === "Some Value eg ' (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

Answers

このようなものを試すことができます

HTML

<div id="clr-change">
 <p>(1)</p>
 <p>(a)</p>
 <p>(2)</p>
 <p>(i)</p>
</div>

JQUERY

$( document ).ready(function() {
 $("#clr-change p").each(function(){
 if($( this ).html() == '(1)' || $( this ).html() == '(2)'){
 $( this ).css({'background-color':'#ff0000'});
    }else if('condition for green'){
    }
})
});

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>

Related