Please allow me to ask a silly question about javascript function. I wonder if there's a way to call javascript function from the div. Without giving an id nor class.

Function

function callTest(){
    name=$(this).attr('data-name');
    clr=$(this).attr('data-clr');

    $(this).html(name+'/'+clr);
}

Then I want to print the data from the parent div into its content. By doing something like this.

<div data-name="john" data-clr="red">
    <script>callTest()</script>
</div>

So I expect this div will filled with john/red. The reason is there will be a lot of div which is need to pass variable on it's own.

Please allow me to ask a silly question about javascript function. I wonder if there's a way to call javascript function from the div. Without giving an id nor class.

Function

function callTest(){
    name=$(this).attr('data-name');
    clr=$(this).attr('data-clr');

    $(this).html(name+'/'+clr);
}

Then I want to print the data from the parent div into its content. By doing something like this.

<div data-name="john" data-clr="red">
    <script>callTest()</script>
</div>

So I expect this div will filled with john/red. The reason is there will be a lot of div which is need to pass variable on it's own.

• javascript
• jquery
• html

• no way to acces a element without specifing an id. @Wilf – user9107868 Commented Jan 23, 2018 at 16:22
• Can I access it with onload? – Wilf Commented Jan 23, 2018 at 16:23
• 5 @TheOneWhoMade Of course you can access an element without an id. document.querySelector('[data-name="john"]')... – Heretic Monkey Commented Jan 23, 2018 at 16:25
• 1 It should be noted that this <script> tag will activate when the page loads, not when the div is clicked or anything. And it won't use the div's scope, either. – Feathercrown Commented Jan 23, 2018 at 16:25
• 1 what are you trying to do first of just to clear this up. @Wilf – user9107868 Commented Jan 23, 2018 at 16:27

4 Answers 4

It will be better to use data() when you want to get data-* attributes :

var name = $(this).data('name');
var clr  = $(this).data('clr');

Then you could use the attribute selector like $('div[data-name]'). Else it will be better to attach an identifier id or a class to your element(s).

$('div[data-name]').each(function() {
  var name = $(this).data('name');
  var clr = $(this).data('clr');

  $(this).html(name + '/' + clr);
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-name="john" data-clr="red">
</div>

You can do something like this and select all elements with the data-name attribute:

$('[data-name]').each(function(){
    let name = $(this).attr('data-name');
    let clr  = $(this).attr('data-clr');
    $(this).html(name+'/'+clr);
});

N.B.: Adding a class and using that instead to select the elements is better for performance, as it can use better optimized functions.

This should do it:

$('[data-name]').each(function(){
  var name = $(this).attr('data-name');
  var color =$(this).attr('data-clr');
  $(this).text(name + '/' + color);
});

This acplishes what you're trying to do:

function callTest() {
  var $div = $('div:last'),
      name = $div.data('name'),
      clr = $div.data('clr');

  document.write(name + '/' + clr);
}

As the browser parses through the HTML, the "last" div will be the one containing the current script element, even if there are multiple divs.

Example:

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  function callTest() {
    var $div = $('div:last'),
        name = $div.data('name'),
        clr = $div.data('clr');

    document.write(name + '/' + clr);
  }
</script>

<div data-name="john" data-clr="red">
  <script>callTest()</script>
</div>

<div data-name="mary" data-clr="green">
  <script>callTest()</script>
</div>

That is not, however, the best approach.

Instead, change the HTML of all the divs like this:

$('div[data-name]').html(function() {
  return $(this).data('name') + '/' + $(this).data('clr');
});

Example:

$('div[data-name]').html(function() {
  return $(this).data('name') + '/' + $(this).data('clr');
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-name="john" data-clr="red"></div>

<div data-name="mary" data-clr="green"></div>