Get dynamic class of element in javascript

Question

I have a table with a bunch of tr elements with random, dynamically created ids, and corresponding divs with matching ids. I want to use the on('click') function so that when one tr element with a given id is clicked, the corresponding div id is also clicked via javascript.

The table:

<tbody>
    <tr id="a94k5h3"></tr>
    <tr id="0f3l6k2"></tr>
    <tr id="44jg96a"></tr>
</tbody>

The divs:

<div id="a94k5h3"></div>
<div id="0f3l6k2"></div>
<div id="44jg96a"></div>

The code I have so far:

    $(document).on('click', '#view_347 #a94k5h3', function(event) { 
    event.preventDefault(); 
    $("#view_349 .kn-view.kn-map-results.view_349 #a94k5h3").click(); 
});

The above code works for the first one, but in practice I won't know what the id #a94k5h3 is, or how many tr/divs there will be. Any help would be much appreciated!

-Edit

I am using knack, which creates all of the html elements dynamically, it is not my code. I have attached an image of the output for possible clarification. [![enter image description here][1]][1]

Essentially I have the same html element on a page twice. When one is clicked, I want the other one to be clicked too.

Answer 1

Since you cannot have duplicate ID on a single page what I suggest you is to use the data-* attribute like this:

<tr data-id="#a94k5h3">

and use .trigger("click") to trigger the designated click event on the DIV Elements

Example:

$(document).on('click', '[data-id]', function(event) {

  event.preventDefault(); // not sure you need this...

  // ID is unique! remember? you don't need the classes extra selectors
  // Use trigger "click"
  $($(this).data("id")).trigger("click");
});


// Just to test!:
$("#view_349").find("div").on("click", function() {
   console.log( this.id );
});

<table>
  <tbody>
    <tr data-id="#a94k5h3"><td>a94k5h3 CLICK ME</td></tr>
    <tr data-id="#0f3l6k2"><td>0f3l6k2 CLICK ME</td></tr>
    <tr data-id="#44jg96a"><td>44jg96a CLICK ME</td></tr>
  </tbody>
</table>


<div id="view_349">
  <div id="a94k5h3">DIV a94k5h3</div>
  <div id="0f3l6k2">DIV 0f3l6k2</div>
  <div id="44jg96a">DIV 44jg96a</div>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

You shouldn't have duplicate id's in your dom, instead you should have data-* attributes. I chose data-id, but what you can do is grab the id of the clicked row, then do a selection based on that, it would look something like this:

$(document).on('click', 'tr', (event) => { 
    event.preventDefault()
    let id = $(event.currentTarget).attr('id')
    $(`[data-id=${id}]`).addClass('selected').click()
})

tr {background-color: red}
div.selected {background-color: yellow}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr id="a94k5h3"><td>Click Me</td></tr>
    <tr id="0f3l6k2"><td>Click Me</td></tr>
    <tr id="44jg96a"><td>Click Me</td></tr>
</table>

<div data-id="a94k5h3">1</div>
<div data-id="0f3l6k2">2</div>
<div data-id="44jg96a">3</div>

Answer 3

Adding TR element click handlers, to click a corresponding DIV element, needs a query selector that does not involve unknown random id values. E.G.based on the console log image:

"#view_349 table.kn-table TBODY TR"

I assume the selector for the DIV element works as provided

"#view_349 .kn-view.kn-map-results.view_349 #" + divId

Then the TR element click listener function can use the id of the TR element clicked,

 event.target.id

to find the corresponding DIV element using JQuery:

$(document).on('click', "#view_347 TR" function(event) { 
    event.preventDefault();
    var targetId = event.target.id;
    $("#view_349 .kn-view.kn-map-results.view_349 #" + targetId).click(); 
});

This will probably work in JQuery but ignores the fact that having two elements with the same id is not valid HTML, as discussed in this question and previously mentioned in comments and other answers. I recommend looking into the possibility of generating the HTML without repeating exactly the same element id value.