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"

我知道每个＆＃39;的存在。功能，但它是一个回调，我不能在循环中构建我的字符串（是吗？）。

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

您可以使用each()来创建所需值的数组，而不是map()。从那里你可以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(" "))

<强> Demo

Answer 6

您可以使用jQuery map（）

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 7

而不是使用each函数，您可以使用map，如下所示：

＆＃13;

    $(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);
    });

＆＃13;

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

＆＃13;

如何遍历表td并在jquery中返回一个字符串？

7 个答案: