Create array from text of selected elements

Question

How do I create an array who's values are the text of selected elements? For instance, the below HTML should result in array ["test1","test2"].

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Create array</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
        <script type="text/javascript"> 
            $(function(){
                var matched=$('#tbody td.sel');
                console.log(matched);
                console.log(matched.toArray());
                console.log(matched.text());
                //console.log(matched.toArray().text());
            });
        </script>
    </head>
    <body>
        <table>
            <thead>
                <tr><td>Name</td><td>GUID</td></tr>
            </thead>
            <tbody id="tbody">
                <tr><td>Client1</td><td class='sel'>test1</td></tr>
                <tr><td>Client2</td><td class='sel'>test2</td></tr>
            </tbody>
        </table>
    </body>
</html>

synthet1c · Accepted Answer · 2017-04-02 14:13:43Z

2

If you are casting the jQuery object to an array, you can just use the standard js Array methods, so I am using Array.prototype.map to iterate over the input array and create a new array with the returned values.

$(function() {
  var matched = $('#tbody td.sel')
  console.log(
    matched.toArray().map(function(el) {
      return $(el).text()
    })
  )
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <td>Name</td>
      <td>GUID</td>
    </tr>
  </thead>
  <tbody id="tbody">
    <tr>
      <td>Client1</td>
      <td class='sel'>test1</td>
    </tr>
    <tr>
      <td>Client2</td>
      <td class='sel'>test2</td>
    </tr>
  </tbody>
</table>

answered Apr 2, 2017 at 14:13

synthet1c

6,3024 gold badges28 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

RIYAJ KHAN · Accepted Answer · 2017-04-02 14:15:26Z

2

var arrText = $("#tbody td.sel").map(function(key, val) {
  return val.textContent
})

console.log(arrText)

answered Apr 2, 2017 at 14:15

RIYAJ KHAN

15.3k5 gold badges34 silver badges56 bronze badges

Comments

jakeehoffmann · Accepted Answer · 2017-04-02 14:24:28Z

Here is a non jQuery solution. I had to use call on the result of getElementsByClassName() since it is only "array-like".

a = document.getElementsByClassName('sel');
arr = [];
arr.forEach.call(a, elem => arr.push(elem.innerText));
console.log(arr);

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Create array</title>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
</head>

<body>
  <table>
    <thead>
      <tr>
        <td>Name</td>
        <td>GUID</td>
      </tr>
    </thead>
    <tbody id="tbody">
      <tr>
        <td>Client1</td>
        <td class='sel'>test1</td>
      </tr>
      <tr>
        <td>Client2</td>
        <td class='sel'>test2</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

Collectives™ on Stack Overflow

Create array from text of selected elements

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related