Jquery How to skip to next iteration

user_2803455 0
Viewed 71

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>

html jquery
2 Answers

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>

user_14918950

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>

user_135734440
Related