CODEWITHSUNDEEP
jquery
HarshVardhan Bandta
HarshVardhan Bandta

Reputation: 139

Apply css to selective elements

In the following HTML snippet -

<td col="Contact">
        <span class="contactInfo">
        35373726<br>
        65837366
        </span>
</td>
<td col="Contact">
        <span class="contactInfo">
        35373726
        </span>
</td>
<td col="Contact">
        <span class="contactInfo">
        35373726<br>
        65837366
        </span>
</td>

I have this structure repeated in the test of the tables.(I am just including the part which is relevant to the question) I want to pick those span class tags wherever there are two entries in it and apply some css to that td[col="Contact"] . i.e. loop through all the col="Contact" s and find all the span tags that have two entries.

Something like -

$('td[col="Contact"]').each(function(){
   ???? will pick only first and third
  .css({'padding': '5px'} );
  })

How to do this using jQuery?

Upvotes: 0

Views: 46

Answers (3)

Twisty
Twisty

Reputation: 30903

Here is an alternate method; basically the same solution as @charlietfl provided.

$(function() {
  $("td[col='Contact'] br").closest("td").addClass("mark");
});
.mark {
  background-color: yellow;
  padding: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td col="Contact">
      <span class="contactInfo">
        35373726<br>
        65837366
        </span>
    </td>
  </tr>
  <tr>
    <td col="Contact">
      <span class="contactInfo">
        35373726
        </span>
    </td>
  </tr>
  <tr>
    <td col="Contact">
      <span class="contactInfo">
        35373726<br>
        65837366
        </span>
    </td>
  </tr>
</table>

The Selector will seek out all TD elements that have BR contained somewhere inside. It will then use .closest() to select the TD again and add a Class.

Upvotes: 1

charlietfl
charlietfl

Reputation: 171690

If there is always a <br/> in the multiples and no <br/> in singles you could use has('br') filter

$('.contactInfo').has('br').parent().css('color', 'red')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td col="Contact">
        <span class="contactInfo">
        35373726<br>
        65837366
        </span>
</td>
<td col="Contact">
        <span class="contactInfo">
        35373726
        </span>
</td>
<td col="Contact">
        <span class="contactInfo">
        35373726<br>
        65837366
        </span>
</td>
</tr>
</table>

Upvotes: 3

rx2347
rx2347

Reputation: 1073

You could do something like this:

// Loop through all .contactInfo
$(".contactInfo").each(function() {
  // Split the content by <br> tags
  const content = $(this).html().split("<br>");
  // If more than 1 item
  if (content.length > 1) {
    // do something
    console.log(content)
    $(this).css("color","red");
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td col="Contact">
  <span class="contactInfo">
        35373726<br>
        65837366
        </span>
</td>
<td col="Contact">
  <span class="contactInfo">
        35373726
        </span>
</td>
<td col="Contact">
  <span class="contactInfo">
        35373726<br>
        65837366
        </span>
</td>

Upvotes: 1

Related Questions