2017-04-02 9 views
1

選択した要素のテキストの値を持つ配列を作成するにはどうすればよいですか?たとえば、以下のHTMLは配列["test1","test2"]になります。あなたは配列にjQueryオブジェクトをキャストしている場合選択した要素のテキストから配列を作成する

<!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> 

答えて

2

、あなただけの標準JSアレイ方式を使用することができますので、私は入力配列を反復し、返された値を使用して新しい配列を作成するために、Array.prototype.mapを使用しています。ここで

$(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>

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

console.log(arrText) 
0

非jQueryのソリューションです。私はの結果にcallを使用しなければなりませんでした。それは "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>

関連する問題