將每個奇數單詞包裝在跨度標簽 jquery

Question

我希望能夠將每個奇數單詞包含在 span 標簽中但排除第一個單詞，我在網上找到了一些代碼，其中代碼將第二個單詞包含在https://codepen.io/ShadyThemes/pen/OpNGjr的 span 標簽中，但是然后找到另一個示例，將第一個，第三個和第五個單詞包裝在http://jsfiddle.net/davidThomas/buNYU/的 span 標簽中，這沒問題，但想排除第一個單詞

以下是我目前擁有的

var words = $('h5.introsubtitle').text().split(' ');
   var numWords = words.length;
      for (i=0; i<numWords; i++) {
         if (i%2 == 0) {
            words[i] = '<span>' + words[i] + '</span>';
         }
       }

      $('h5.introsubtitle').html(words.join(' '));

我目前擁有的如下

<h5 class="introsubtitle"><span>COMPUTER</span> REPAIR <span>FAST</span> AND <span>SECURE</span>

我想要實現的是以下

<h5 class="introsubtitle">COMPUTER REPAIR <span>FAST</span> AND <span>SECURE</span></h5>

Answer 1

你試過了嗎

.class:nth-child(odd) {
...
}

Answer 2

如果您只需要 SPAN 進行樣式設置，我建議將每個單詞包裝在一個跨度中並在 CSS 中進行樣式設置（如另一個答案中所述）。

 var words = $('h5.introsubtitle').text().split(' '); var numWords = words.length; for (i = 0; i < numWords; i++) { words[i] = '<span>' + words[i] + '</span>'; } $('h5.introsubtitle').html(words.join(' '));

 body { font-family: Helvetica; } h5.introsubtitle span:nth-child(odd) { color: blue; } h5.introsubtitle span, h5.introsubtitle span:first-child { color: red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h5 class="introsubtitle">COMPUTER REPAIR FAST AND SECURE </h5>