CODEWITHSUNDEEP
htmljquery
abcid d
abcid d

Reputation: 2953

Jquery How to skip to next iteration

I have a table and need to append a <span> to both td:first-child cell and td:first-child cell.

Problems:

  1. There is already exist a <span> in the first td. How to skip appending if a <span> is already there? (If if statement somehow doesn't work)

  2. I wonder why my code doesn't append <span> in a td:last-child

  3. Please take a look at the second and third rows of the first column, the insert text comes after text in the cell (Jill 2 first-col, Jill 2 first-col). How to move insert text in front?

Please give me a hand. Thanks!

$(document).ready(function() {
  $('tr td:first-child').append('<span class="first-col"> first-col</span>');
  if ($('tr td:first-child span').length) {
    return false
  }
  $('tr td:last-child').append('<span class="second-col"> second-col</span>')
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td><span class="first-col"> first-col</span>Jill</td>
    <td>Smith</td>
  </tr>
  <tr>
    <td>Jill 2</td>
    <td>Smith 3</td>
  </tr>
  <tr>
    <td>Jill 3</td>
    <td>Smith 3</td>
  </tr>

</table>

Upvotes: 2

Views: 122

Answers (2)

s.kuznetsov
s.kuznetsov

Reputation: 15213

You must use method each() to define the current tr td:first-child as this, using the find() method with the span tag specified in it.

$("tr td:first-child").each(function () {
    if (!$(this).find("span").length) {
        $(this).append('<span class="first-col"> first-col</span>');
    }
});

Inserting a span tag with class first-col, place it inside a condition, with a boolean operator NOT.

$(document).ready(function () {
    $("tr td:first-child").each(function () {
        if (!$(this).find("span").length) {
            $(this).append('<span class="first-col"> first-col</span>');
        }
    });
    $("tr td:last-child").append('<span class="second-col"> second-col</span>');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="width: 100%;">
    <tr>
        <th>Firstname</th>
        <th>Lastname</th>
    </tr>
    <tr>
        <td><span class="first-col"> first-col</span>Jill</td>
        <td>Smith</td>
    </tr>
    <tr>
        <td>Jill 2</td>
        <td>Smith 3</td>
    </tr>
    <tr>
        <td>Jill 3</td>
        <td>Smith 3</td>
    </tr>
</table>

Upvotes: 0

Barmar
Barmar

Reputation: 780655

You need to put the if statement around the code that adds the new span. Since you put it after, the condition is always true, so you return and never get to the code that adds the span to the last child.

You also need to use .each() so you're testing just one TD at a time, not all of them.

Instead you can use :not(:has(span)) to exclude TDs that already have a span from the selector.

$(document).ready(function() {
  $('tr td:first-child:not(:has(span))').append('<span class="first-col"> first-col</span>');
  $('tr td:last-child').append('<span class="second-col"> second-col</span>')
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td><span class="first-col"> first-col</span>Jill</td>
    <td>Smith</td>
  </tr>
  <tr>
    <td>Jill 2</td>
    <td>Smith 3</td>
  </tr>
  <tr>
    <td>Jill 3</td>
    <td>Smith 3</td>
  </tr>

</table>

Upvotes: 2

Related Questions