如何选择特定类元素及beds-21下的bed-row-count span元素？

一、如何选择单个特定类的元素？ #

如果只想选中单个带有特定类的元素，直接用类选择器配合first()方法就能拿到第一个匹配项；要是想直接取原生DOM元素，也可以用下标取值：

// 获取第一个带beds-21类的元素（jQuery对象）
$('.beds-21').first();

// 获取第一个匹配的原生DOM元素
$('.beds-21')[0];

如果是要选中所有该类的元素，直接写$('.你的类名')即可，它会返回包含所有匹配元素的jQuery集合。

二、选中beds-21类下的bed-row-count span元素并遍历 #

针对你提供的HTML结构，我们可以用后代选择器精准定位目标元素，再配合each()方法遍历操作。

先把你的示例HTML格式化展示：

<table>
  <tr class="beds-20">
    <td>...</td>
    <td><img /></td>
    <td><span class="bed-row-count">1</span> ...</td>
  </tr>
  <tr class="beds-20">
    <td>...</td>
    <td><img /></td>
    <td><span class="bed-row-count">2</span> ...</td>
  </tr>
</table>
<table>
  <tr class="beds-21">
    <td>...</td>
    <td><img /></td>
    <td><span class="bed-row-count">1</span> ...</td>
  </tr>
  <tr class="beds-21">
    <td>...</td>
    <td><img /></td>
    <td><span class="bed-row-count">2</span> ...</td>
  </tr>
</table>

对应的jQuery实现代码如下：

// 精准匹配beds-21类tr下的所有bed-row-count span元素
$('.beds-21 .bed-row-count').each(function(index) {
  // this指向当前遍历到的原生span元素，转成jQuery对象用$(this)
  const currentText = $(this).text();
  console.log(`第${index + 1}个span的内容：${currentText}`);
  
  // 示例操作：修改span内容
  // $(this).text(`修改后的内容${index + 1}`);
});

选择器逻辑说明： #

• .beds-21：匹配所有带beds-21类的元素（这里就是目标tr标签）
• 空格：表示后代关系，会匹配前面元素下的所有嵌套后代
• .bed-row-count：筛选出带有该类的span元素

如果想更严谨（只匹配tr的直接子td里的span），可以用子代选择器>来缩小范围：

$('tr.beds-21 > td > span.bed-row-count').each(function(index) {
  // 操作逻辑同上
});

不过一般情况下，后代选择器已经能满足需求，除非页面存在其他同名类元素可能造成干扰。

内容的提问来源于stack exchange，提问作者Pete