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

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.