获取列位置（如第一、第二等）

Question

when I click on an icon, it will change but I want to know in which column is clicked icon (like the first one or the second one or the third one, etc.)

 $(".fa-caret-down").click(function(){ if($(this).is(".fa-caret-down")){ $(this).removeClass("fa-caret-down").addClass("fa-caret-up"); //console.log() - in which column it was changed }else{ $(this).removeClass("fa-caret-up").addClass("fa-caret-down"); //console.log() - in which column it was changed } });

 <table style="width:100%"> <thead> <tr> <th>#<i class="fas fa-caret-down ml-2" style="cursor: pointer;"></i></th> <th>Name<i class="fas fa-caret-down ml-2" style="cursor: pointer;"></i></th> <th>Price<i class="fas fa-caret-down ml-2" style="cursor: pointer;"></i></th> <th>1h %<i class="fas fa-caret-down ml-2" style="cursor: pointer;"></i></th> <th>24h %<i class="fas fa-caret-down ml-2" style="cursor: pointer;"></i></th> <th>Timestamp<i class="fas fa-caret-down ml-2 align" style="cursor: pointer;"></i></th> </tr> </thead> <tbody></tbody> </table>

Answer 1

jQuery index function will return the index of the element.

 $(".fa-caret-down").click(function(){ console.log($(this).parent().index()) //- in which column it was changed if($(this).is(".fa-caret-down")){ $(this).removeClass("fa-caret-down").addClass("fa-caret-up"); }else{ $(this).removeClass("fa-caret-up").addClass("fa-caret-down"); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"> <table style="width:100%"> <thead> <tr> <th>#<i class="fas fa-caret-down ml-2" style="cursor: pointer;"></i></th> <th>Name<i class="fas fa-caret-down ml-2" style="cursor: pointer;"></i></th> <th>Price<i class="fas fa-caret-down ml-2" style="cursor: pointer;"></i></th> <th>1h %<i class="fas fa-caret-down ml-2" style="cursor: pointer;"></i></th> <th>24h %<i class="fas fa-caret-down ml-2" style="cursor: pointer;"></i></th> <th>Timestamp<i class="fas fa-caret-down ml-2 align" style="cursor: pointer;"></i></th> </tr> </thead> <tbody></tbody> </table>

Answer 2

simply use event delegation and classList.replace() method
(and it is more clear with css)

Each TD or TH element have a cellIndex property

 document.querySelector('table thead').onclick = e => { if (!e.target.matches('i.fas')) return // ignore clicks from elsewhere let eTH = e.target.closest('th') , onDown = e.target.classList.contains('fa-caret-down') ; console.clear() console.log( 'column :', eTH.cellIndex, eTH.innerText, onDown?'UP':'DOWN' ), setTimeout(console.clear,3000) if (onDown) e.target.classList.replace('fa-caret-down','fa-caret-up') else e.target.classList.replace('fa-caret-up','fa-caret-down') }

 table { width: 100%; } table thead th i.fas { cursor : pointer; }

 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" > <table > <thead> <tr> <th>#<i class="fas fa-caret-down ml-2" ></i></th> <th>Name<i class="fas fa-caret-down ml-2" ></i></th> <th>Price<i class="fas fa-caret-down ml-2" ></i></th> <th>1h %<i class="fas fa-caret-down ml-2" ></i></th> <th>24h %<i class="fas fa-caret-down ml-2" ></i></th> <th>Timestamp<i class="fas fa-caret-down ml-2 align" ></i></th> </tr> </thead> <tbody></tbody> </table>

but IMHO it would be cooler if the whole column header is used to invert the graph

 document.querySelector('table thead').onclick = ({target}) => { if (!target.matches('table thead th, table thead th i.fas')) return // ignore clicks from elsewhere let eIfas = target.querySelector('i.fas') , eTH = target.closest('th') , onDown = eIfas.classList.contains('fa-caret-down') ; console.clear() console.log( 'column :', eTH.cellIndex, ':',eTH.innerText, onDown?'UP':'DOWN' ) setTimeout(console.clear,5000) if (onDown) eIfas.classList.replace('fa-caret-down','fa-caret-up') else eIfas.classList.replace('fa-caret-up','fa-caret-down') }

 table { width: 100%; } table thead th { cursor : pointer; } table thead th:hover { background-color: lightgoldenrodyellow; } table thead th:hover i.fas { color: crimson; }

 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" > <table > <thead> <tr> <th># <i class="fas fa-caret-down ml-2" ></i></th> <th>Name <i class="fas fa-caret-down ml-2" ></i></th> <th>Price <i class="fas fa-caret-down ml-2" ></i></th> <th>1h % <i class="fas fa-caret-down ml-2" ></i></th> <th>24h % <i class="fas fa-caret-down ml-2" ></i></th> <th>Timestamp <i class="fas fa-caret-down ml-2 align" ></i></th> </tr> </thead> <tbody></tbody> </table>

Answer 3

You can use plain javascript to get it, let me show below:

$(".fa-caret-down").click(function(event){
    console.log(event.target.parentElement.cellIndex)
    if($(this).is(".fa-caret-down")){
        $(this).removeClass("fa-caret-down").addClass("fa-caret-up");
    }else{
        $(this).removeClass("fa-caret-up").addClass("fa-caret-down");
    }
});

1. Pass the event as parameter into click function:
2. Using this element get the current element using target , aftet get its parent node using parentElement because the event is triggered clicking on <i><i/> element and it's inside a th , and finally get the cell index using cellIndex
3. You don't need a console.log inside if and else, you need only when the event id triggered