how to get varible from div tag, with javascript

Question

I am using javascript to loop through divs and retrieve a photo from a url. The loop is working perfect but I want to store a unique id from the div tag.

$(document).ready(function() {
  var profileurl = 'https://testprofiles.com';
  var serial = 'democompany';
  $('.profile').each(function(i, obj) {
    var uid = this.uid;
    $("div").find('#avatar').attr('src', profileurl + '/' + serial + '/' + uid + '/api/avatar');
  });
});

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Test</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>

<body>
  <div class="profile" uid="206" style="float: left;">
    <div><img id=avatar src=""></div>
  </div>
  <div class="profile" uid="208" style="float: left;">
    <div><img id=avatar src=""></div>
  </div>
  <div class="profile" style="float: left;">
    <div><img id=avatar src=""></div>
  </div>
  <div class="profile" style="float: left;">
    <div><img id=avatar src=""></div>
  </div>
</body>

</html>

I would like to get the uid from the html code in the <div> head.

Try with $(this).prop('uid')

Zlatin Hristov
– Zlatin Hristov

2019-03-23 18:17:15 +00:00
Commented Mar 23, 2019 at 18:17 — Zlatin Hristov
– Zlatin Hristov, Commented Mar 23, 2019 at 18:17

random · Accepted Answer · 2019-03-23 18:40:47Z

use $(this).attr("uid");

$(document).ready(function() {
  var profileurl = 'https://testprofiles.com';
  var serial = 'democompany';
  $('.profile').each(function(i, obj) {
    let uid = $(this).attr("uid");
    if(uid) {console.log(uid)}
    $("div").find('#avatar').attr('src', profileurl + '/' + serial + '/' + uid + '/api/avatar');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="profile" uid="206" style="float: left;">
    <div><img id=avatar src=""></div>
</div>
<div class="profile" uid="208" style="float: left;">
    <div><img id=avatar src=""></div>
</div>
<div class="profile" style="float: left;">
    <div><img id=avatar src=""></div>
</div>
<div class="profile" style="float: left;">
    <div><img id=avatar src=""></div>
</div>

use data- for custom attributes

$(document).ready(function() {
    var profileurl = 'https://testprofiles.com';
    var serial = 'democompany';
    $('.profile').each(function(i, obj) {
        let uid = $(this).data("uid");
        if(uid) {console.log(uid)}
        $("div").find('#avatar').attr('src', profileurl + '/' + serial + '/' + uid + '/api/avatar');
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="profile" data-uid="206" style="float: left;">
    <div><img id=avatar src=""></div>
</div>
<div class="profile" data-uid="208" style="float: left;">
    <div><img id=avatar src=""></div>
</div>
<div class="profile" style="float: left;">
    <div><img id=avatar src=""></div>
</div>
<div class="profile" style="float: left;">
    <div><img id=avatar src=""></div>
</div>

You asked for javascript solution, but you had used jQuery code. Stick with one, don't mix up both. Below is the javascript solution.

$(document).ready(function() {
    var profileurl = 'https://testprofiles.com';
    var serial = 'democompany';
    $('.profile').each(function(i, obj) {
        let uid = this.dataset.uid; // or this.getAttribute('data-uid')
        if(uid) {console.log(uid)}
        $("div").find('#avatar').attr('src', profileurl + '/' + serial + '/' + uid + '/api/avatar');
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="profile" data-uid="206" style="float: left;">
    <div><img id=avatar src=""></div>
</div>
<div class="profile" data-uid="208" style="float: left;">
    <div><img id=avatar src=""></div>
</div>
<div class="profile" style="float: left;">
    <div><img id=avatar src=""></div>
</div>
<div class="profile" style="float: left;">
    <div><img id=avatar src=""></div>
</div>

If the solution solves you problem, mark it as accepted so to indicate that problem has been resolved.

Collectives™ on Stack Overflow

how to get varible from div tag, with javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related