2

这个问题是我提出问题的根本原因。

隐藏所有下一个 tr td 直到下一个 tr th

由于已经发布了两个答案，我想尝试一些不同的东西

Javascript：

$(function(){ 
    var thList = $('td');
    $('td').click(function(){
        for( i =0; i < thList.length;i++){
            // What to do here
        }
    });
});

HTML：

    <table border="2">
        <tr>
            <td> 1 </td>
            <td> 2 </td>
            <td> 3 </td>
        </tr>
    <table>

这里所做的是将点击事件分配给<TH>元素。在加载时，我<TH>将 DOM 中的所有内容放在一个数组中。

现在，我的逻辑是。迭代 for 循环，如果单击TH的不是 中的那个for loop，则隐藏它。

我尝试的是

if ( thList[i] != $(this)) { thList[i].style.display = 'none' }

但这似乎不起作用。我需要放什么代码来比较对象

4

4 回答 4

2

When you are accessing the items in a jQuery object, you get them as DOM elements, not as new jQuery objects. So, you should compare it to the element reference directly, not wrap the element reference in a jQuery object:

for (i = 0; i < thList.length; i++) {
  if ( thList[i] != this) { thList[i].style.display = 'none' }
}

You can also use the not method to get a collection without the current element:

thList.not(this).each(function(){ this.style.display = 'none'; });

Of course, using the css method it becomes even simpler:

thList.not(this).css('display', 'none');

Word of caution: The cells in tables are not really separate elements that you can just hide without affecting the other cells in the table. The table can show unexpected behaviour when you hide cells in it.

于 2012-07-10T14:26:14.883 回答
2

1-您$(this)与this一个 jquery 对象不同 2-您没有 TH 元素，这里的代码与您想要的相似，但带有 td

$(function(){
var tdList = $('td');
$('td').click(function(){
    tdList.hide();
    $(this).show();
    //OR  tdList.not(this).hide();

  });
});
于 2012-07-10T14:42:53.177 回答
2

除了您的示例标记不包含任何元素这一事实之外，th您还可以尝试以下操作：

$('td').click(function(){

    var $tdList = $('td').not(this); // <- get all th's and exlude the clicked element

    $tdList.each(function(){this.style.display = 'none'; });
});

或者更好的是，使用 jQuery，你不需要每个包装器：

$tdList.hide();

由于 jQuery 为您节省了大量工作，因此请尽可能尝试使用它 - 使用each()for 循环和使用.css()（或者更专用的方法，如.hide()）而不是原生.style- 这应该会显着缩短您的代码。

于 2012-07-10T14:33:23.233 回答
2

您可以使用：

thList.click(function() {
    thList.not(this).css("display", "none");
});

出于性能原因，您可以委托该事件：

$("#yourtable").on("click", "th", function(event) {
    thList.not(event.target).css("display", "none");
});

我没有测试它，但应该可以。

但是我对 UI 很好奇：如果 TH 以这种方式隐藏，那么在第一次单击它们之后就无法再显示它们了。

于 2012-07-10T14:35:10.493 回答