如何将数据值从一个 div 克隆到另一个？

Question

我有一个 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？

Answer 1

如果我没有正确理解你的问题，你想将驻留在 data-ep 和 data-title 中的数据复制到另一个名为 mobile-title-list 的 div（以便它包含完全相同的前面提到的属性和相应的值）。有几种方法可以实现这一点（这取决于您的页面支持的内容——即您包含的 CDN）。最简单的方法是使用 JQuery（您必须在 <head></head> 部分的代码中 link 它的 CDN）。要在 JQuery 中执行此操作，您首先需要某种类型的 selector：通常是 id（用“#”符号表示）或 class（用符号表示带有 '.' 符号）。如果您只想将 data-ep 和 data-title 属性复制到 mobile-title-list，那么您应该使用 id select 或（因为 id 应该实现为唯一的您代码中的标识符）；但是，如果您计划将这些属性复制到 mobile-title-list 以外的其他元素，那么您应该使用 class（因为这些属性应该以允许重新使用的方式在您的代码中实现class 随处可见的可用性）。出于所有意图和目的，我假设您只想将这些属性复制到那个元素，因此，我建议将 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 为“target”，但我建议使其更相关实际源代码中的名称。无论如何，一旦您在要使用的 div 中都设置了 id，那么您可以使用 JQuery 到 select 来自第一个 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);

最后将所有代码放在一个漂亮的基本 html 页面中 JQuery:

<!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 值加载到变量中，那么您就不会像我一样从 'target' 中加载它们 select , 而不是简单地将具有这些值的属性添加到 mobile-title-list.

如何将数据值从一个 div 克隆到另一个？

How to clone data values from one div to another?

javascript

jquery

clone