Блог

Главная - Вопросы по программированию - как получить переменную из тега div с помощью javascript

как получить переменную из тега div с помощью javascript

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

Я использую javascript для перебора divs и извлечения фотографии из URL. Цикл работает идеально, но я хочу сохранить уникальный идентификатор из тега div. 

 $(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>

Я хотел бы получить uid из html-кода в <div> head.

Комментарии:

1. Попробуйте с помощью $(this).prop(‘uid’)

Ответ №1:

используйте $(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>

использовать data- для пользовательских атрибутов

 $(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>

Вы просили javascript решение, но вы использовали jQuery код. Придерживайтесь одного, не путайте оба. Ниже приведено javascript решение.

 $(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>

Комментарии:

1. Если решение решает вашу проблему, пометьте его как принятое, чтобы указать, что проблема решена.