每个首先添加类js

Question

我需要为每个第一个.event添加class和样式。

$('.day.event')
.first()
.css('background-image', 'linear-gradient(145deg, #bee5ff 50%, #ffd2da 50%)');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td><span class="day">27</span></td>
<td><span class="day">28</span></td>
<td><span class="day">29</span></td>
<td><span class="day">30</span></td>
<td><span class="day">1</span></td>
<td><span class="day event">2</span></td>
<td><span class="day event">3</span></td>
</tr>
<tr>
<td><span class="day">4</span></td>
<td><span class="day">5</span></td>
<td><span class="day event">6</span></td>
<td><span class="day event">7</span></td>
<td><span class="day">8</span></td>
<td><span class="day event">9</span></td>
<td><span class="day event">10</span></td>
</tr>
</table>

Answer 1

您可以尝试:

$('tr').find('.event:first').css(....

演示:

$('tr').find('.event:first').css('background-image', 'linear-gradient(145deg, #bee5ff 50%, #ffd2da 50%)');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td><span class="day">27</span></td>
<td><span class="day">28</span></td>
<td><span class="day">29</span></td>
<td><span class="day">30</span></td>
<td><span class="day">1</span></td>
<td><span class="day event">2</span></td>
<td><span class="day event">3</span></td>
</tr>
<tr>
<td><span class="day">4</span></td>
<td><span class="day">5</span></td>
<td><span class="day event">6</span></td>
<td><span class="day event">7</span></td>
<td><span class="day">8</span></td>
<td><span class="day event">9</span></td>
<td><span class="day event">10</span></td>
</tr>

Answer 2

你是说

$('tr').find('.day.event:first').each(function() {
$(this)
.css('background-image', 'linear-gradient(145deg, #bee5ff 50%, #ffd2da 50%)');
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td><span class="day">27</span></td>
<td><span class="day">28</span></td>
<td><span class="day">29</span></td>
<td><span class="day">30</span></td>
<td><span class="day">1</span></td>
<td><span class="day event">2</span></td>
<td><span class="day event">3</span></td>
</tr>
<tr>
<td><span class="day">4</span></td>
<td><span class="day">5</span></td>
<td><span class="day event">6</span></td>
<td><span class="day event">7</span></td>
<td><span class="day">8</span></td>
<td><span class="day event">9</span></td>
<td><span class="day event">10</span></td>
</tr>
</table>