trabajo
HTML (La parte HTML se genera a través de un JSON, esta es solo la plantilla):
<table id="table-blog" class="order-table table table-hover"> <thead> <tr> <th>Title</th> <th>Description</th> <th>Tags</th> <th>Url</th> <th>Active</th> </tr> </thead> <tbody> <tr> <td>Title</td> <td>Description</td> <td>Tags</td> <td>Url</td> <td><input type="checkbox"></td> </tr> <tr> <td>Title</td> <td>Description</td> <td>Tags</td> <td>Url</td> <td><input type="checkbox"></td> </tr> <tr> <td>Title</td> <td>Description</td> <td>Tags</td> <td>Url</td> <td><input type="checkbox"></td> </tr> </tbody> </table>Aquí el JS:
function syncBlog(blogs) { blogs = Object.values(blogs); var tbody = $("#table-blog > tbody"); console.log($(tbody).children()); $(tbody).children().each(function(){ $(this).children('td:last-child').children("input").prop("checked", false); }); if(blogs.length > 0) { blogs.forEach(blog => { $(tbody).children().each(function(){ console.log($(this)); if($(this).children('td:first').text() == blog.title) { console.log(blogs); $(this).children('td:last-child').children("input").prop("checked", true); } }); }); } } No sé por qué .children() no devuelve nada, sin embargo, la tabla se llena antes (mediante una llamada ajax).
Pero si intento con JS nativo:
var tbody = document.querySelector("#table-blog > tbody"); console.log(tbody.children); Podré ver HTMLCollection con todos los <tr> , pero no puedo usarlos y .length me devuelve 0
Bueno, gracias a todos por sus respuestas. Pude encontrar la solución que ahora parece clara. El DOM no estaba completamente cargado antes de la ejecución de la función. Para resolver el problema hice mi llamada AJAX en sincronía: Ejemplo:
$.ajax({ url:'Your url', methode:'POST',//In my case data:'Your data', success:function(), error:function(), async:false, });