Как выбрать элементы из одного конкретного c класса?

Question

Как выбрать здесь элементы bed-row-count span только для plays-21 ? Таким образом, я могу использовать jQuery каждый , чтобы перебирать их ...

например,

jQuery('selector').each(function(index) {
    ...do something to each span...
});

Вот пример 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>

Answer 1

Используйте функцию .find для поиска диапазона и каких-либо действий с ним в классе beds-21.

Выполните фрагмент ниже.

$('.beds-21').each(function(index) {
  var mySpan = $(this).find('span')

  //Display the text of each span
  console.log(mySpan.text())
  
  //Display the actual element
  console.log(mySpan[0].outerHTML)

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

Answer 2

Это должно работать:

jQuery('table tr.beds-21 td span.bed-row-count').each(function(index) {
        ...do something to each span...
});

Answer 3

Только эта одна строка - ваше решение:

$('[class*="bed-row-count"]').parent().parent('tr.beds-21').css('background', 'fireBrick')

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <tr class="beds-20">
        <td>fgfggfg</td>
        <td><img /></td>
        <td><span class="bed-row-count">1</span> gfgfgf</td>
    </tr>
    <tr class="beds-20">
        <td>nmhhjh</td>
        <td><img /></td>
        <td><span class="bed-row-count">2</span> rergg</td>
    </tr>
</table>
<table>
    <tr class="beds-21">
        <td>ghjhkj</td>
        <td><img /></td>
        <td><span class="bed-row-count">1</span> 2ddfd</td>
    </tr>
    <tr class="beds-21">
        <td>ghgjhg</td>
        <td><img /></td>
        <td><span class="bed-row-count">2</span>12323</td>
    </tr>
</table>
<script>

$('[class*="bed-row-count"]').parent().parent('tr.beds-21').css('background', 'fireBrick')
</script>