如何遍历表TD并在jQuery中返回字符串？

Question

我有一个简单的表（比此示例大）

 <table cellpadding="0" cellspacing="0" id="chess_board">
  <tbody>
    <tr>
        <td id="A8"><a class="rook black" href="#"></a></td>
        <td id="B8"><a class="knight black" href="#">Cont1</a></td>
        <td id="C8"><a class="bishop black" href="#">Cont2</a></td>
    </tr>
    <tr>
        <td id="A7"><a class="pawn black" href="#">Cont3</a></td>
        <td id="B7"><a class="pawn black" href="#"></a></td>
        <td id="C7"><a class="pawn black" href="#">Cont4</a></td>
    </tr>
   </tbody>
  </table>

在jquery中，如何遍历所有td并返回包含不为空的td id和文本的字符串？ 在这种情况下，字符串

 "B8 Cont1 C8 Cont2 A7 Cont3 C7 Cont4"

我知道'each'函数的存在，但这是一个回调，并且我无法在循环过程中构建字符串（是吗？）。

Answer 1

猜猜你可以这样：

 $(function () { var allString = ""; $("#chess_board td[id]").each(function () { if ($(this).find(".black").html().trim().length > 0) allString += this.id + " " + $(this).find(".black").html().trim() + " "; }); alert(allString); }); 

 <script src="https://code.jquery.com/jquery-1.9.1.js"></script> <table cellpadding="0" cellspacing="0" id="chess_board"> <tbody> <tr> <td id="A8"><a class="rook black" href="#"></a></td> <td id="B8"><a class="knight black" href="#">Cont1</a></td> <td id="C8"><a class="bishop black" href="#">Cont2</a></td> </tr> <tr> <td id="A7"><a class="pawn black" href="#">Cont3</a></td> <td id="B7"><a class="pawn black" href="#"></a></td> <td id="C7"><a class="pawn black" href="#">Cont4</a></td> </tr> </tbody> </table> 

Answer 2

这将达到目的...

var text = "";
$("#chess_board").find("td").each(function() {
    if (this.id !== "" && this.innerText !== "") {
        text += this.id + " " + this.innerText + " ";
    }
});
console.log(text);

您差一点就拥有了。 您只需要在each()函数外部声明该字符串，即可在此期间和之后使用它。

Answer 3

可以使用map()代替所需的each()数组来创建所需值的数组。 从那里您可以join()数组以创建所需的字符串。 尝试这个：

 var values = $('#chess_board td').filter(function() { return $.trim($(this).text()) != ''; }).map(function() { return $.trim(this.id + ' ' + $(this).text()); }).get(); console.log(values.join(' ')); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table cellpadding="0" cellspacing="0" id="chess_board"> <tbody> <tr> <td id="A8"> <a class="rook black" href="#"></a> </td> <td id="B8"><a class="knight black" href="#">Cont1</a> </td> <td id="C8"><a class="bishop black" href="#">Cont2</a> </td> </tr> <tr> <td id="A7"><a class="pawn black" href="#">Cont3</a> </td> <td id="B7"> <a class="pawn black" href="#"></a> </td> <td id="C7"><a class="pawn black" href="#">Cont4</a> </td> </tr> </tbody> </table> 

Answer 4

你应该试试：

var text = "";
$('td').each(function(index, elem) {
    if ($(elem).find('a').text() != '')
    {
        text += elem.id + ' ' + $(elem).find('a').text() + ' ';
    }
});
console.log(text);

https://jsfiddle.net/mgxa3k9g/

Answer 5

使用数组可以更有序地完成，例如：

var result = [];

$("#chess_board td").each(function(){
  var text = $(this).text();
  text.length && result.push($(this).attr("id") + " " + text);
});

console.log(result.join(" "))

演示版

Answer 6

您可以使用jQuery map（）

 var tds = $("td"); var txt = tds.map( function () { var x = $.trim($(this).text()); return x.length ? x : null } ).get().join(" "); console.log(txt); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table cellpadding="0" cellspacing="0" id="chess_board"> <tbody> <tr> <td id="A8"><a class="rook black" href="#"></a></td> <td id="B8"><a class="knight black" href="#">Cont1</a></td> <td id="C8"><a class="bishop black" href="#">Cont2</a></td> </tr> <tr> <td id="A7"><a class="pawn black" href="#">Cont3</a></td> <td id="B7"><a class="pawn black" href="#"></a></td> <td id="C7"><a class="pawn black" href="#">Cont4</a></td> </tr> </tbody> </table> 

Answer 7

而不是使用each函数，您可以像这样使用map ：

  $(function () { var allString = []; allString = $("#chess_board td").map(function(){ return $(this).find("a").html() != "" ? $(this).attr("id")+" "+$(this).find("a").html() : ""; }).get(); allString = allString.join(" ").trim(); alert(allString); }); 

  <script src="https://code.jquery.com/jquery-1.9.1.js"></script> <table cellpadding="0" cellspacing="0" id="chess_board"> <tbody> <tr> <td id="A8"><a class="rook black" href="#"></a></td> <td id="B8"><a class="knight black" href="#">Cont1</a></td> <td id="C8"><a class="bishop black" href="#">Cont2</a></td> </tr> <tr> <td id="A7"><a class="pawn black" href="#">Cont3</a></td> <td id="B7"><a class="pawn black" href="#"></a></td> <td id="C7"><a class="pawn black" href="#">Cont4</a></td> </tr> </tbody> </table>