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

Joseph 发表于 Dev

约瑟夫

我正在使用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 。

随机

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。