Comparing “this” object with Object in DOM Array

Question

This question is the root cause for my question.

Hide all next tr td until next tr th

As already two answers being posted , I thought of trying something different

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>

What am doing here is Assigning click event to <TH> element. And on load , am getting all the <TH> in the DOM in an Array.

Now, my logic is. Iterate the for loop and if the clicked TH is not the one in the for loop , then hide it.

What i tried is

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

But this does not seem to be working. what code I need to put there to compare the object

Answer 1

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.

Answer 2

Besides the fact, that you example markup does not contain any th -elements, you could try the following:

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

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

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

or even better, use jQuery, you don't need a each wrapper then:

$tdList.hide();

Since jQuery saves you a lot of work, try to use it whenever you can - use the each() instead of for-loops and use .css() (or even more dedicated methods like .hide() ) instead of the native .style - this should shorten your code significantly.

Answer 3

You can use:

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

For performance reason you could delegate the event instead:

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

I didn't test it, but should works.

However I'm curious about the UI: if the TH are hidden in this way, they can't be displayed anymore after the first click of any of them.

Answer 4

1-You $(this) is diferent of this once is a jquery object 2-You dont have a TH element here is the code similar that you want but whit td's

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

  });
});