Question

我是jQuery / Javascript的新手我试图知道td元素是否包含多个带文本的li元素..
如果有多个带有文字的td元素，则我有关注li。代码示例：

<td class="tdClass"/>
  <div id="div1Id" class="div1Class">
    <ul class="ulClass">
        <li id="" class="rtLI rtFirst">
            <div class="rtMid">
                <div>Text1</div>
            </div>
        </li>
        <li id="" class="rtLI rtLast">
            <div class="rtMid">
                <div>Text2</div>
            </div>
        </li>
    </ul>

 </div>
</td>

如果我只有一个没有文字的li元素，则跟随：

<td class="tdClass"/>
<div id="div1Id" class="div1Class">
    <ul class="ulClas">
        <li id="" class="rtLI rtFirst rtLast">
            <div class="rtMid">&nbsp;</div>
        </li>
    </ul>

  </div>
</td>

我怎么能以简单的方式（jQuery / javascript）知道我的td是否有＆＃34;内部元素＆＃34;？我看到如果有元素，第一个li项目只有rtLI rtFirst类，如果不是rtLI rtFirst reLast但我怎么能从我的代码中知道？感谢

Answer 1

我的回答基于你的评论

我想知道我是否只有一个'li'，内部div元素为空文本。

由于你的实际问题的措辞不太明确。

似乎有很多方法可以实现您所追求的目标，它们都是以对div元素的引用开始的。在jQuery中，您使用#选择器

按Id选择元素

var $div = $('#divId');

（注意，作为一个常见的约定，你可以将与jQuery对象相关的变量加上$前缀，以区别于其他变量。不是必需的，但是有用的约定）

从那里，仅包含空白文本的元素似乎同时包含rtFirst和rtLast类。因此，您可以计算这两个类的子女数量。如果该计数等于1，那么您就拥有该元素。

if($divId.find('.rtFirst.rtLast').length === 1){
    // you only have the one element with both rtFirst _and_ rtLast
}

另一种方法是计算div中ul的子项数

var numberofLis = $divId.children('ul').children().length;
if(numberofLis === 1){
    // you only have the one element
}

还有无数其他方法可以实现同样的目标。

Answer 2

**请注意，您不能使用此<td class="tdClass"/>，而应该是<td class="tdClass">，而不是 / ，因为这意味着它是“ self-closing“代码和td代码无法成为自动结算代码，您需要</td>才能将其关闭。

// loop through the tds with tdClass class
$('#theTable .tdClass').each(function() {
  var $this = $(this),
      matched = $this.find('.rtMid');
  
  // if we find only one .rtMid in the td..
  if (matched.length === 1) {
    
    // and its trimmed text is empty, then we have a match
    if (matched.text().trim() === '') {
      //match found, your code here
      $this.css({'outline': '2px solid red'});
    }
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table id="theTable">
  <tr>
    <!-- two divs with text in them, No Match -->
    <td class="tdClass">
      <div id="div1Id" class="div1Class">
        <ul class="ulClass">
          <li id="" class="rtLI rtFirst">
            <div class="rtMid">
              <div>Text1</div>
            </div>
          </li>
          <li id="" class="rtLI rtLast">
            <div class="rtMid">
              <div>Text2</div>
            </div>
          </li>
        </ul>
      </div>
    </td>
    <!-- one div with no text in it, MATCH -->
    <td class="tdClass">
      <div id="div1Id" class="div1Class">
        <ul class="ulClas">
          <li id="" class="rtLI rtFirst rtLast">
            <div class="rtMid">&nbsp;</div>
          </li>
        </ul>
      </div>
    </td>
    <!-- two divs without text in them, No Match -->
    <td class="tdClass">
      <div id="div1Id" class="div1Class">
        <ul class="ulClas">
          <li id="" class="rtLI rtFirst rtLast">
            <div class="rtMid"></div>
          </li>
          <li id="" class="rtLI rtFirst rtLast">
            <div class="rtMid"></div>
          </li>
        </ul>
      </div>
    </td>
    <!-- one div with text in it, No Match -->
    <td class="tdClass">
      <div id="div1Id" class="div1Class">
        <ul class="ulClas">
          <li id="" class="rtLI rtFirst rtLast">
            <div class="rtMid">abc</div>
          </li>
        </ul>
      </div>
    </td>
  </tr>
</table>

Answer 3

完整的示例代码，只查找那些包含多个li的tds：

＆＃13;

//function search for all tds with more then one li element inside
function getAllTdsWithLiMoreThenOne(rootSelector){
 
   return $(rootSelector).find("td").has("li").filter(function(){
        
        return $(this).find("li").length>1;
   });
}

//after document is loaded
$(function(){

  //here in getAllTdsWithLiMoreThenOne("table") you get list of tds
  console.log("Tds with more than one li : "+getAllTdsWithLiMoreThenOne("table").length);
  
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td id="td1" class="tdClass"/>
  <div id="div1Id" class="div1Class">
    <ul class="ulClass">
        <li id="" class="rtLI rtFirst">
            <div class="rtMid">
                <div>Text1</div>
            </div>
        </li>
        <li id="" class="rtLI rtLast">
            <div class="rtMid">
                <div>Text2</div>
            </div>
        </li>
    </ul>

 </div>

</td>
<td id="td2">
    
    <div id="div2Id" class="div1Class">
    <ul class="ulClass">
        <li id="" class="rtLI rtFirst">
            <div class="rtMid">
                <div>Text1</div>
            </div>
        </li>
    </ul>

 </div>
</td>
</tr>
</table>

＆＃13;

函数 getAllTdsWithLiMoreThenOne（选择器）返回Jquery对象的集合，所以你在盘子里有所有tds里面有多个li。

PS。在表格中插入div并不是一种好习惯。

Td内部元素

3 个答案: