Add br tag after few anchor tags in jquery-CodePudding

I have following HTML:

<td >
   <a href="/show/1">1</a>
   <a href="/show/2">2</a>
   <a href="/show/3">3</a>
   <a href="/show/4">4</a>
   <a href="/show/5">5</a>
   <a href="/show/6">6</a>
</td>

Output:

1 2 3 4 5 6

I want to have such that the <br> tag is added after 3 anchor tag, so the output looks like following:

1 2 3
4 5 6

How to do in jQuery?

CodePudding user response：

You need to check if is <a> is multiple of 3 so add <br> like:

$('table tr td a').each((index,el) => {  
   var indexPlus = index   1;
   if(indexPlus % 3 === 0){
    $(el).after('<br>');
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">
  <tr>
    <td>
      <a href="/show/1">1</a>
      <a href="/show/2">2</a>
      <a href="/show/3">3</a>
      <a href="/show/4">4</a>
      <a href="/show/5">5</a>
      <a href="/show/6">6</a>
      <a href="/show/7">7</a>
      <a href="/show/8">8</a>
      <a href="/show/9">9</a>
      <a href="/show/10">10</a>
      <a href="/show/11">11</a>
      <a href="/show/12">12</a>
    </td>
  </tr>
  <tr>
    <td>
      <a href="/show/1">1</a>
      <a href="/show/2">2</a>
      <a href="/show/3">3</a>
      <a href="/show/4">4</a>
      <a href="/show/5">5</a>
      <a href="/show/6">6</a>
      <a href="/show/7">7</a>
      <a href="/show/8">8</a>
      <a href="/show/9">9</a>
      <a href="/show/10">10</a>
      <a href="/show/11">11</a>
      <a href="/show/12">12</a>
    </td>
  </tr>
</table>

Reference:

.after()

CodePudding user response：

you can use css selector nth-child(3n) for select each 3 child and method .after to append html to this third child

$('.sorting_1 a:nth-child(3n)').after('<br/>');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <td >
    <a href="/show/1">1</a>
    <a href="/show/2">2</a>
    <a href="/show/3">3</a>
    <a href="/show/4">4</a>
    <a href="/show/5">5</a>
    <a href="/show/6">6</a>
    <a href="/show/1">1</a>
    <a href="/show/2">2</a>
    <a href="/show/3">3</a>
    <a href="/show/4">4</a>
    <a href="/show/5">5</a>
    <a href="/show/6">6</a>
  </td>
</table>

CodePudding user response：

I will suppose that u have a table element, this is how it should looks like with jQuery

$('table tr td a:nth-child(3n 3)').each(function(){
    $(this).after('<br>');
});

and this is how u do it without jQuery

let a_tags = document.querySelectorAll('table tr td a:nth-child(3n 3)');

a_tags.forEach(element => {
    let br = document.createElement('br');
        element.after(br);
});

CodePudding user response：

While you can't add HTML using CSS pseudo elements, you can still achieve the same layout by adding an empty string and using display:block

a:nth-child(3n)::after {
  content:"";
  display:block;
}

As this uses css, assuming you load your css in the <head>, you won't get a FOUC (flash of unstyled content) while waiting for your js to be parsed and run.

There's also an existing answer using css display:float: break after nth child

a:nth-child(3n)::after {
  content:"";
  display:block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">
  <tr>
    <td>
      <a href="/show/1">1</a>
      <a href="/show/2">2</a>
      <a href="/show/3">3</a>
      <a href="/show/4">4</a>
      <a href="/show/5">5</a>
      <a href="/show/6">6</a>
      <a href="/show/7">7</a>
      <a href="/show/8">8</a>
      <a href="/show/9">9</a>
      <a href="/show/10">10</a>
      <a href="/show/11">11</a>
      <a href="/show/12">12</a>
    </td>
  </tr>
  <tr>
    <td>
      <a href="/show/1">1</a>
      <a href="/show/2">2</a>
      <a href="/show/3">3</a>
      <a href="/show/4">4</a>
      <a href="/show/5">5</a>
      <a href="/show/6">6</a>
      <a href="/show/7">7</a>
      <a href="/show/8">8</a>
      <a href="/show/9">9</a>
      <a href="/show/10">10</a>
      <a href="/show/11">11</a>
      <a href="/show/12">12</a>
    </td>
  </tr>