Question

我正在使用JavaScript遍历div并从url中检索照片。循环工作完美，但我想存储div标签中的唯一ID。

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

我想从<div>头的html代码中获取uid。

Answer 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>

如何使用javascript从div标签获取变量

1 个答案: