我有一个 div，里面有很多数据值：
<div class="loaddata absolute" data-rel="https://media.acast.com/dtns/zflipsandzfolds-dtns4092/media.mp3"
data-ep="episode 4" data-title="Z Flips and Z Folds"></div>
如何将数据从 data-ep 和 data-title 克隆到另一个名为 mobile-title-list 的 div？
【问题讨论】：
element.dataset 可能值得一看
标签： javascript jquery clone
如果我正确理解您的问题，您希望将data-ep 和data-title 中的数据复制到另一个名为mobile-title-list 的div 中（以便它包含与前面提到的完全相同的属性和相应的值）。有几种方法可以实现这一点（这取决于您的页面上支持的内容——即您所包含的 CDN）。最简单的方法是使用 JQuery（您必须在 <head></head> 部分的代码中链接其 CDN）。要在 JQuery 中执行此操作，您首先需要某种类型的选择器：通常是 id（用“#”符号表示）或类（用“.”符号表示）。如果您只想将data-ep 和data-title 属性复制到mobile-title-list，那么您应该使用id 选择器（因为id 应该在您的代码中实现为唯一标识符）；但是，如果您计划将这些属性复制到 mobile-title-list 以外的其他元素，那么您应该使用一个类（因为这些应该在您的代码中以允许在任何地方重用该类的方式实现）想）。出于所有意图和目的，我假设您只想将这些属性复制到那个元素，因此，我建议将 mobile-title-list 设为 div 的 id，如下所示：
<div id="mobile-title-list"></div>
此外，您需要在问题中包含的 div 中添加一个 id（包含您尝试复制的这两个属性），如下所示：
<div id="target" class="loaddata absolute" data-rel="https://media.acast.com/dtns/zflipsandzfolds-dtns4092/media.mp3"
data-ep="episode 4" data-title="Z Flips and Z Folds"></div>
由于我没有太多关于您的代码应该做什么的上下文，因此我通常将 div 标识为“目标”的 id，但我建议使其与您的实际源中的名称更相关代码。无论如何，一旦您在要使用的两个 div 中都设置了 id，那么您可以使用 JQuery 从第一个 div 中选择两个目标值，然后将它们“注入”到另一个 div 中，就像这样：
// Select the data-ep and data-title info from the target div:
const data_ep_value = $('#target').attr('data-ep');
const data_title_value = $('#target').attr('data-title');
// Now add those attributes to mobile-title-list:
$('#mobile-title-list').attr('data-ep', data_ep_value);
$('#mobile-title-list').attr('data-title', data_title_value);
最后将所有代码放在一个带有 JQuery 的漂亮的基本 html 页面中：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<link rel="stylesheet" type="text/css" crossorigin="anonymous" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="mobile-title-list"></div>
<div id="target" class="loaddata absolute" data-rel="https://media.acast.com/dtns/zflipsandzfolds-dtns4092/media.mp3"
data-ep="episode 4" data-title="Z Flips and Z Folds"></div>
<script type="text/Javascript">
// Select the data-ep and data-title info from the target div:
const data_ep_value = $('#target').attr('data-ep');
const data_title_value = $('#target').attr('data-title');
// Now add those attributes to mobile-title-list:
$('#mobile-title-list').attr('data-ep', data_ep_value);
$('#mobile-title-list').attr('data-title', data_title_value);
</script>
</body>
</html>
如果你想用“原始”的 JS 方式来做，那么使用这个 javascript 而不是前面提到的 JQuery：
// Select the data-ep and data-title info from the target div:
const data_ep_value = document.getElementById('target').getAttribute('data-ep');
const data_title_value = document.getElementById('target').getAttribute('data-title');
// Now add those attributes to mobile-title-list:
document.getElementById('mobile-title-list').setAttribute('data-ep', data_ep_value);
document.getElementById('mobile-title-list').setAttribute('data-title', data_title_value);
但是，如果您已经将 data-ep 和 data-title 值加载到以前使用的变量中，那么您不会像我一样从“目标”中选择它们，而只需将具有这些值的属性添加到 @ 987654337@.
【讨论】：