如何将元素对象作为参数发送到没有ID的javascript函数

Question

In function ClickedRow, i want to use the "a" which is being clicked. So i want to receive it as a parameter.

<td ...... >
<span class="......>
  <span onmousedown="event.cancelBubble = true">
      <a class="GridLinkRenderer" href="javascript:ClickedRow(this)"  onclicklink="javascript:ClickedRow(this)" urlText="XXXX">

<td ......
<span class="......>
  <span onmousedown="event.cancelBubble = true">
      <a class="GridLinkRenderer" href="javascript:ClickedRow(this)"  onclicklink="javascript:ClickedRow(this)" urlText="XXXXX">

Based on clicked <a ....> I would like to hide/show it (or to show/hide next <a class= "GridLinkRenderer" in other <td ...> ) by function ClickedRow(this). How can I do it ?

I've tried to send the clicked $(row).next().eq(0).tagName and row.style.display = 'none' , it says that it is "undefined".

function ClickedRow(row){

$(row).next().eq(0).hide();
$(row).hide();


}

Answer 1

Instead of this, remove href and use

$('#TheidOfTheA').on('click'function(){
let myAElement = $(this);
}

Answer 2

have you looked at closest(),find() and next() ?

• https://api.jquery.com/closest/
• https://api.jquery.com/next/

• https://api.jquery.com/find/

  $(row).closest('td').next('td').find('.GridLinkRenderer')

haven't tested this.. but if I'm thinking right this should be at least the point to right direction.

Answer 3

I can't tell by OP if the td are being used in a tr and the tr in a table as it should so I'll just mention real quick that it's invalid HTML should there be any td without a tr as a parent and it's invalid HTML having a tr without a table as its ancestor.

If starting at a tag nested within a td you'll need to climb out :

$(this).closest('td')...

Once at the cell level look around for the cells to the left: ....prev('td') , or to the right: ....next('td') or both: ....siblings('td') . Then go down each td and find the link nested within and turn it off/on: ....find('.gLR').fadeToggle();

$(this).closest('td').siblings('td').find('.gLR').fadeToggle();

 $('.gLR').not('.g5').hide(); $('.gLR').on('click', function(e) { if ($(this).hasClass('g5')) { $('.gDir').fadeToggle(); } else if ($(this).hasClass('g1') || $(this).hasClass('g9')) { const cell = $(this).closest('td'); cell.siblings('td').find('.gLR').fadeToggle(); } else if ($(this).hasClass('g4')) { $(this).closest('td').prev('td').find('.gLR').fadeToggle(); } else if ($(this).hasClass('g6')) { $(this).closest('td').next('td').find('.gLR').fadeToggle(); } else { return false; } }); 

 :root { font: 700 5vw/1.5 Consolas } table { table-layout: fixed; border-collapse: collapse; } td { width: 20%; text-align: center } a { display: block; height: 10vh; text-decoration: none; color: cyan; } a:hover { color: tomato; } a.g5:hover { font-size: 0; } a.g5:hover::after { content: '\\1f536'; font-size: 5vw; } td b { display: block; height: 10vh; } 

 <table> <tr class='gRA'> <td colspan='2'> <b><a href='#/' class="gLR g0">🌈</a></b> </td> <td><b><a href='#/' class="gLR gDir g1">⮝</a></b></td> <td colspan='2'> <b><a href='#/' class="gLR g2">🦄</a></b> </td> </tr> <tr class='gRB'> <td><b><a href='#/' class="gLR g3">🏰</a></b></td> <td><b><a href='#/' class="gLR gDir g4">⮜</a></b></td> <td><b><a href='#/' class="gLR g5">🔷</a></b></td> <td><b><a href='#/' class="gLR gDir g6">⮞</a></b></td> <td><b><a href='#/' class="gLR g7">🏯</a></b></td> </tr> <tr class='gRC'> <td colspan='2'> <b><a href='#/' class="gLR g8">🔥</a></b> </td> <td><b><a href='#/' class="gLR gDir g9">⮟</a></b></td> <td colspan='2'> <b><a href='#/' class="gLR g10">💀</a></b> </td> </tr> </table> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

Answer 4

I tried both recommendations(thx for it) - no success.
It looks that the "this" argument is not passed like clicked element(object) reference.

The parameter "row" seems to be like parent of all object, so like new Object and not the clicked object.

I am not sure if href="javascript:ClickedRow(this)" onclicklink="javascript:ClickedRow(this)" is correct syntax though.

Answer 5

so copied Your sample and came up with this. ;) try this out.. and make sure You understand what's happening here.

$(() => {
            $("body").on("click",".GridLinkRenderer", (e) => {
                e.preventDefault();
                //works on the first link.. stil misses a few check.. 
                //for example do we have the next td.. at all.. 
                console.log($(e.currentTarget).closest('td').next('td').find('.GridLinkRenderer'));
            })
        });