Question

我想将jQuery元素添加到jQuery变量中。这是一张桌子的例子；当我单击包含BBBB的单元格时，我想切换所有BBBB标头的高亮显示。 在$ .each迭代中使用.add（）方法似乎无效，它导致元素为空。（下面的示例现在有效）

<script>
$( function () {
$( "td" ).click(function() {
var index = $(this).prevAll().length;  
var $table = $(this).parent().parent().parent()
var id=$table.find('tr').first().find(':nth-child(' + (index + 1) + ')').attr('id')
var $ret=$()
$headers = $("table").find('#' + id)
$.each(
    $headers, 
    function (index, value) { $ret=$ret.add(value); } 
    )
$ret.toggleClass('highlight')
 })
})
</script>

<table id="t1">
<thead><tr><th id="a">AAAA</th><th id="c">CCCC</th><th id="d">DDDD</th> 
</tr></thead>
<tbody>
<tr><td>AAAA</td><td>CCCC</td><td>DDDD</td></tr>
<tr><td>AAAA</td><td>CCCC</td><td>DDDD</td></tr>
<tr><td>AAAA</td><td>CCCC</td><td>DDDD</td></tr>
<tr><td>AAAA</td><td>CCCC</td><td>DDDD</td></tr>
<tr><td>AAAA</td><td>CCCC</td><td>DDDD</td></tr>
</tbody>
</table>
<br>
<table id="t2">
<thead><tr><th id="b">BBBB</th><th id="c">CCCC</th><th id="d">DDDD</th>    </tr></thead>
<tbody>
<tr><td>BBBB</td><td>CCCC</td><td>DDDD</td></tr>
<tr><td>BBBB</td><td>CCCC</td><td>DDDD</td></tr>
<tr><td>BBBB</td><td>CCCC</td><td>DDDD</td></tr>
<tr><td>BBBB</td><td>CCCC</td><td>DDDD</td></tr>
<tr><td>BBBB</td><td>CCCC</td><td>DDDD</td></tr>
</tbody>
</table>
<br>
<table id="t3">
<thead><tr><th id="a">AAAA</th><th id="b">BBBB</th><th id="c">CCCC</th><th id="d">DDDD</th></tr></thead>
<tbody>
<tr><td>AAAA</td><td>BBBB</td><td>CCCC</td><td>DDDD</td></tr>
<tr><td>AAAA</td><td>BBBB</td><td>CCCC</td><td>DDDD</td></tr>
<tr><td>AAAA</td><td>BBBB</td><td>CCCC</td><td>DDDD</td></tr>
<tr><td>AAAA</td><td>BBBB</td><td>CCCC</td><td>DDDD</td></tr>
<tr><td>AAAA</td><td>BBBB</td><td>CCCC</td><td>DDDD</td></tr>
</tbody>
</table>

Answer 1

经过一番混乱之后，我得出了这种语法，可以正常工作。

<script>
$( function () {
$( "td" ).click(function() {
var index = $(this).prevAll().length;  
var $table = $(this).parent().parent().parent()
var id=$table.find('tr').first().find(':nth-child(' + (index + 1) + ')').attr('id')
var $ret=$()
$headers = $("table").find('#' + id)
$.each(
    $headers, 
    function (index, value) { $ret=$ret.add(value); } 
    )
$ret.toggleClass('highlight')
 })
})
</script>

秘密在https://api.jquery.com/add中，其内容为：

以下内容将不会保存添加的元素，因为.add（）方法创建了一个新集合，并使pdiv中的原始集合保持不变：

var pdiv = $( "p" );
pdiv.add( "div" ); // WRONG, pdiv will not change

Answer 2

使用add()时，您需要重新分配变量。

var td = $();
$('table').on('click', 'td', function(){
    td = td.add($(this));
});

如何将jQuery元素添加到现有的jquery变量中

2 个答案: