jquery如何识别标签里面无内容

Question

jquery如何识别标签里面无内容

html字符串

 let myhtmlStr = ` <table style="width:290px;height:74px;" border="1">
                      <tbody>
                        <tr style="height: 21.8182px;">
                          <td style="width: 45.4403px; height: 21.8182px;">小明</td>
                          <td style="width: 68.7216px; height: 21.8182px;">小雨</td>
                          <td style="width: 76.0511px; height: 21.8182px;">小样</td>
                          <td style="width: 144.503px; height: 21.8182px;">小水</td>
                          <td style="width: 124.02px; height: 21.8182px;">小贝</td>
                        </tr>
                        <tr style="height: 21.8182px;">
                          <td style="width: 45.4403px; height: 21.8182px;">january</td>
                          <td style="width: 68.7216px; height: 21.8182px;">february</td>
                          <td style="width: 76.0511px; height: 21.8182px;">march</td>
                          <td style="width: 144.503px; height: 21.8182px;">april</td>
                          <td style="width: 124.02px; height: 21.8182px;">may</td>
                        </tr>
                        <tr>
                          <td style="width: 45.4403px;"> </td>
                          <td style="width: 68.7216px;"> </td>
                          <td style="width: 76.0511px;"> </td>
                          <td style="width: 144.503px;"> </td>
                          <td style="width: 124.02px;"> </td>
                        </tr>
                      </tbody>
                    </table>`;

不太成功的jquery代码

   let dataKey 
    $("table tr").each(function (index, item) {
      $(item)
        .find("td")
        .each(function (idx, list) {
            if ($(list).text() === "") {
              //第一条路:想判断td无内容时走一个if 
              //现在的问题是。怎么都不进来  -------  大家有什么办法可以达到我的目的呢？
                      //如何进这个判断
            } else if (dataKey === $(list).eq(0).text()) {
               //第二条路:想判断td有内容时走一个if 
              console.log($(list).eq(0).text(), 123);
            
            }
         
          if($(list).eq(0).text() == '一个内容'){
            $(list).eq(0).text("一个内容");
          }else if($(list).eq(0).text() == ''){
            $(list).eq(0).text(" ");
            //如何进这里  
          }
         
        });
    });

但愿我表达明白了

Answer 1

你想要判断 td 标签里面是否有内容，可以使用 html() 方法来获取标签内的所有内容，再使用 trim() 方法去掉前后空格进行判断。下面是修改后的代码示例：

let dataKey 
$("table tr").each(function (index, item) {
  $(item)
    .find("td")
    .each(function (idx, list) {
        if ($(list).html().trim() === "") {
          //第一条路:想判断td无内容时走一个if 
          console.log("no content");
        } else if (dataKey === $(list).eq(0).text()) {
           //第二条路:想判断td有内容时走一个if 
          console.log($(list).eq(0).text(), 123);
        
        }
     
      if($(list).eq(0).text() == '一个内容'){
        $(list).eq(0).text("一个内容");
      }else if($(list).eq(0).text().trim() == ''){
        $(list).eq(0).html(" "); // 使用空格的 HTML 实体代替为空的情况
        console.log("empty content");
      }
    });
});

注意，在判断是否为空时，如果不使用 trim() 方法去掉空格，还有可能会因为标签内有空格这种字符而无法正确判断为空。另外，当 td 标签内为空时，使用 text() 方法获取不到内容，需要改用 html() 方法来获取。