在DOM数组中比较“this”对象与对象

正如已经被张贴两个答案，我想尝试不同的东西

的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中获取DOM中的所有<TH>。

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

是我的尝试是

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

但这似乎并不奏效。我需要放置哪些代码来比较对象

来源

2012-07-10 madhairsilence

是'是th'元素在**页面加载后添加** – Lix 2012-07-10 14:26:13

从您发布的代码看来，点击的'TH'将总是*在* thList'数组中。 – James 2012-07-10 14:26:16

除非我误解了这个问题，否则你不需要跳过循环来实现你想要的。在点击处理程序中$（this）已经引用了被点击的元素。 – Dimitri 2012-07-10 14:27:13

除了这个事实，你比如标记不包含任何th -elements，你可以尝试以下方法：

$('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()），而不是NAT ive .style - 这会显着缩短您的代码。

来源

2012-07-10 14:33:23 Christoph

对不起。错字：更新:) – madhairsilence 2012-07-10 14:34:21

当您访问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');

谨慎的说法：表中的单元格不是真正独立的元素，您可以在不影响表格中的其他单元的情况下隐藏它们。当您隐藏单元格时，该表可能会显示意外的行为。

来源

2012-07-10 14:26:14 Guffa

Yeh。尝试过但不工作。但如果没有错。当我绑定一个jQuery事件，我将得到jQuery的包装，而不是正常的DOM对象的 – madhairsilence 2012-07-10 14:30:34

$（ '日'）。点击（函数（）{ \t \t \t \t \t thList.not（本）。每个（函数（）{alert（''）; this.style.display ='none';}）; \t \t \t \t}）; 这是你的意思。对不起：（不工作！） – madhairsilence 2012-07-10 14:32:38

@madhairsilence：在jQuery事件中，'this'是对DOM元素的引用，而不是对包含元素的jQuery对象的引用，我尝试了两个版本，并且它们工作：http：// jsfiddle.net/Guffa/ddMWd/ – Guffa 2012-07-10 14:36:04

您可以使用：

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-10 14:35:10 ZER0

1 - 您$(this)是this diferent曾经是一个jQuery对象 2 - 你不必在这里一个个元素的代码相似，你想，但丝毫TD的

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

    }); 
});

来源

2012-07-10 14:42:53

简单而辉煌。 – madhairsilence 2012-07-10 14:44:39

看起来不错，我宁愿'tdList.not（this）.hide（）;'虽然。 – Christoph 2012-07-10 15:27:46

在DOM数组中比较“this”对象与对象

回答

相关问题