Get data-value from element in another file with jQuery

Question

So basically I have some elements with some data-values in a file . I want to dynamically create links to them using those data-values to type the text, href etc.

For example, I have two divs, id'ed firstand second. They have importance values, respectively "most important" and "least important".

I want to create two links to them, with the phrase "This is a link to the most/least important div" using JavaScript/jQuery. Below is a non-working example.

File a.html (ommiting headings and such, ofc):

<div id='first' data-importance='most important'>This is the first div.</div>

<div id='second' data-importance='least important'>This is the second div.</div>

File b.html:

<p><a class='makelink' data-linkto='first'></a></p>

<p><a class='makelink' data-linkto='second'></a></p>

$(`.makelink`).each( function(){
  var target = $(this).data('linkto');
  $(this).attr('href','b.html#' + target);
  var imp = $('b.html #' + target).data('importance'); 
  $(this).html('Link to the ' + imp + ' div');
});

However nothing happens. Any help is appreciated.

You can't alter the DOM of another file unless that file is open in a window or frame that the current file knows about. It's not clear what you're looking for. — Heretic Monkey
– Heretic Monkey, Commented Apr 5, 2019 at 12:24

Mamun · Accepted Answer · 2019-04-05 00:26:07Z

1

Your code seems correct except the selector should be inside quote and the string generated in the html() is not properly formatted:

$('.makelink').each( function(){ // Enclosed the selector with single/double qoute
  var target = $(this).data('linkto');
  $(this).attr('href','#' + target);
  var imp = $('#' + target).data('importance'); 
  $(this).html('Link to the '+ imp + ' div'); // concatenate the string with the variable using +
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id='first' data-importance='most important'>This is the first div.</div>

<div id='second' data-importance='least important'>This is the second div.</div>

<p><a class='makelink' data-linkto='first'></a></p>

<p><a class='makelink' data-linkto='second'></a></p>

answered Apr 5, 2019 at 0:26

Mamun

69k9 gold badges51 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Questioner Over a year ago

Thanks for noticing those mistakes. The code you provided works as-is. However I tried to do the same implementation for getting data-values in elements in another file and it does not work (I updated the question). Would you know why? Thanks

Heretic Monkey Over a year ago

You conveniently ignored the part of the question about "another file".

Questioner Over a year ago

@HereticMonkey No. I had phrased the question ommiting that part because I thought any solution for elements in the same file would work, and Mamum's answer works in that case. However my problem was not really solved...

Heretic Monkey Over a year ago

@Questioner my comment was directed to Mamun, not you. I'm not sure why you accepted this answer if it didn't answer your question...

Questioner Over a year ago

@HereticMonkey I understand that. I was just explaining that his answer was good for the question as previously asked. So it is my fault that his answer does not apply anymore.

|

Collectives™ on Stack Overflow

Get data-value from element in another file with jQuery

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related