Tengo el siguiente 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>Producción:
1 2 3 4 5 6 Quiero tener tal que la etiqueta <br> se agregue después de 3 etiquetas de anclaje, por lo que el resultado se ve así:
1 2 3 4 5 6¿Cómo hacerlo en jQuery?
Debe verificar si <a> es múltiplo de 3, así que agregue <br> como:
$('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>Referencia:
puede usar el selector css nth-child(3n) para seleccionar cada 3 niños y el método .after para agregar html a este tercer niño
$('.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>Supondré que tienes un elemento de tabla, así es como debería verse con jQuery
$('table tr td a:nth-child(3n+3)').each(function(){ $(this).after('<br>'); });y así es como lo haces sin 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); });