将“this”对象与 DOM 数组中的对象进行比较

Question

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

Hide all next tr td until next 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> 元素。在加载时，我将 DOM 中的所有 <TH> 放入一个数组中。

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

我尝试的是

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

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

Answer 1

除此之外，您的示例标记不包含任何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，你就不需要 each 包装器了：

$tdList.hide();

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

Answer 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 以这种方式隐藏，那么在第一次点击它们之后就无法再显示了。

Answer 3

1-你 $(this) 不同于 this 曾经是一个 jquery 对象 2-你这里没有 TH 元素是你想要的类似的代码，但是 td 的

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

  });
}); 

Answer 4

当您访问 jQuery 对象中的项目时，您会将它们作为 DOM 元素获取，而不是作为新的 jQuery 对象。因此，您应该直接将其与元素引用进行比较，而不是将元素引用包装在 jQuery 对象中：

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

您也可以使用not method 来获取没有当前元素的集合：

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

当然，使用css method 会变得更加简单：

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

---

注意事项：表格中的单元格并不是真正独立的元素，您可以隐藏它们而不影响表格中的其他单元格。当您将单元格隐藏在表格中时，表格可能会出现意外行为。