CODEWITHSUNDEEP
jquerycss
Pete
Pete

Reputation: 593

How do I select elements from one specific class?

How do I select the bed-row-count span elements only for beds-21 here? Such that I can use jQuery each to iterate over them...

e.g.

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

Here's example 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>

Upvotes: 1

Views: 42

Answers (3)

Talha Noyon
Talha Noyon

Reputation: 854

Only this one line is your solution:

$('[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>

Upvotes: 0

Always Helping
Always Helping

Reputation: 14570

Use .find function to search for span and do something to it on beds-21 class.

Run snippet below.

$('.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>

Upvotes: 1

Steven2105
Steven2105

Reputation: 550

This should work:

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

Upvotes: 1

Related Questions