Select all innerHTML of td in ul li hierarchy

Question

I have an html structure as follows-

<ul id='abc'>
    <li>
        <table>
            <tbody>
                <tr>
                    <td>
                        A
                    </td>
                </tr>
            </tbody>
        </table>
    </li>
    <li>
        <table>
            <tbody>
                <tr>
                    <td>
                        B
                    </td>
                </tr>
            </tbody>
        </table>
    </li>       
    ...
    ...
</ul>

I want to store A,B,C... values in an array using jquery.Please help...

Answer 1

You can use $.fn.map()

Translate all items in an array or object to new array of items.

var arr = $('#abc td').map(function(){
    return $(this).text();
}).get();

Answer 2

you can do this by javascript by The

Element.getElementsByTagName() method returns a live HTMLCollection of elements with the given tag name

var values = []
var tableUl = document.getElementById("abc"); 
var cells = tableUl.getElementsByTagName("td"); 
for (var i = 0; i < cells.length; i++) { 
    values.push( cells[i].textContent.trim()); 

}

fiddle

Answer 3

Here is what you want:

var values = [];
$('ul li').find('td').each(function() {
  values.push($(this).html());
});

Answer 4

这应该工作：

var values = $('ul#abc td').map(function() { return $(this).text(); });

Answer 5

Try utilizing .text() , String.prototype.match()

 var res = $("#abc td").text().match(/\\w+/gi) console.log(res) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> <ul id='abc'> <li> <table> <tbody> <tr> <td> A </td> </tr> </tbody> </table> </li> <li> <table> <tbody> <tr> <td> B </td> </tr> </tbody> </table> </li> </ul> 

Answer 6

Another way would be:

$("ul#abc li td:first-child").each(function () {
   //alert($(this).text());
   console.log($(this).text());
 });