jQuery与嵌套表，选择外部表tr/td与传递选择器

我想建立一个嵌套的表函数。因此，在函数中，我传递了一个选定的元素，并且我只想选择该表的子代/直接后代td/tr，而不是嵌套表的td/tr元素。这是我设置的一个小例子。jQuery与嵌套表，选择外部表tr/td与传递选择器

<table class="top"> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
    </tr> 
    <tr> 
     <td>3</td> 
     <td>4</td> 
    </tr> 
    <tr> 
     <td>5</td> 
     <td> 
      <table class="nested"> 
       <tr> 
        <td>1</td> 
        <td>2</td> 
       </tr> 
       <tr> 
        <td>3</td> 
        <td>4</td> 
       </tr> 
       <tr> 
        <td>5</td> 
        <td>4</td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
</table> 

<div id="results"></div>

和jQuery的/ Javascript来用它去......

var tbl = $(".top"); 
var r = $("div#results"); 

$(r).html(""); 

$(r).append("var tbl = $(\".top\")</br>") 

$(r).append("$(tbl).find(\"td\").length:" + $(tbl).find("td").length.toString() + "</br>"); 

$(r).append("$(\"td\", tbl).length: " + $("td", tbl).length.toString() + "</br>"); 

$(r).append("$(tbl).children(\"tbody\").children(\"tr\").children(\"td\").length: " + $(tbl).children("tbody").children("tr").children("td").length.toString() + "</br>");

的结果如下...

VAR TBL = $（ “顶部”）（以模拟通过选择器）

$（TBL）.find（ “TD”）长度：12 （选择所有td元素）

$（ “TD”，TBL）。长度：12 （选择所有td元素，与上述相同）

$（TBL）。儿童（ “TBODY”）的儿童（ “TR”） .children（“td”）。length：6 （选择合适的元素，但jQuery链看起来太长而且对我想要做的很严格）

任何帮助为子元素找到合适的选择器顶级的桌子非常感谢！谢谢！

更新：这里是jsFiddle。除了您选择

来源

2012-07-30 JoeFletch

你的意思是像$（“。top> TR> TD”）？ – 2012-07-30 20:41:46

@Tim：不会，因为''之间和之后都有一个'tbody'元素，所以不起作用。top'元素通过函数传递。 – JoeFletch 2012-08-01 18:02:46

使用嫡系

工作小提琴（> ）选择器：http://jsfiddle.net/3T9sN/

$(function(){ 
    var rows = $(".top > TBODY > TR"); 
    alert("Number of rows: " + rows.length); 

    var cells = $(".top > TBODY > TR > TD"); 
    alert("Number of cells : " + cells.length); 
});

当然，你可以重用这里的一些背景，使查询更有效，如：

var tbody = $(".top > tbody"); 

// using children() method 
var rows = tbody.children("TR"); 

// using selector context 
var cells = $("> TR > TD", tbody); 

alert("Number of rows: " + rows.length); 
alert("Number of cells : " + cells.length);

小提琴：http://jsfiddle.net/3T9sN/1/

来源

2012-07-30 20:46:08

我以为我试过'$（“> tbody> tr> td”，tbl）'，但我想我错过了！谢谢回复。这适用于我想要做的事情。写得更短，更快。 – JoeFletch 2012-07-31 11:40:22

通行证家长找到孩子的元素

 $("what your looking for ", parent);

同

 $(parent).children("what you are looking for")

首先是更短的语法

来源

2012-07-30 20:44:57

谢谢，但这两个陈述**不**提供相同的结果。 – JoeFletch 2012-07-31 11:20:31

var tbl = $('.top'); 
var stuff = tbl.find('table').filter(function(){ 
    $('#results').append($('tr, td', this).length); 
});

通常情况下，你可以使用在返回过滤函数，但我们不想返回元素，我们想要使用从它们抽象出的数据。为此，请勿使用“返回”方法。

Standard-issue jsFiddle...

来源

2012-07-30 20:51:13 Ohgodwhy

列出的代码返回嵌套的'table'的'tr'和'td'元素。我更新了代码以显示我在说什么。 [的jsfiddle]（http://jsfiddle.net/TheJoeFletch/qfKhJ/1/） – JoeFletch 2012-07-31 11:26:20

$('tr:not(tr tr)')。可能比使用后代选择器慢，但更灵活。

来源

2012-07-31 11:49:48 Tgr

jQuery与嵌套表，选择外部表tr/td与传递选择器

回答

相关问题