I have following HTML:
<td class="sorting_1">
<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?
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:
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 class="sorting_1">
<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>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);
});