实现这一目标的最佳方法是什么？ 我有两个div，第一个组在其子元素中有数据属性，我想获取这些数据属性并将其作为id传递给第二个div其他子元素。我只得到xx3
var dataArr = [];
$('.child').each(function(index,el){
var dataID = $(this).attr("data-id");
dataArr.push(dataID);
});
//console.log(dataArr);
dataArr.map(function(i){
console.log(i)
$('.child2').each(function(index,el){
console.log($(this).attr('id',i));
});
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="child" data-id="xx1">Hello world</div>
<div class="child" data-id="xx2">Hello world2</div>
<div class="child" data-id="xx3">Hello world3</div>
</div>
<div class="parent2">
<div class="child2" id=""></div>
<div class="child2" id=""></div>
<div class="child2" id=""></div>
</div>
答案 0 :(得分：0)
您可以使用.each()遍历您需要data-attribute的div并使用带有索引的.eq()来确定需要为其设置ID的div，例如{{1或{c} $('.parent2 .child2').eq(index)选择器，如:eq
工作演示
$('.parent2 .child2:eq(' + index + ')')$('.parent .child').each(function(index){
var dataID = $(this).attr("data-id"); // you can use data('id') instead of attr("data-id")
$('.parent2 .child2').eq(index).attr('id' , dataID);
console.log($('.parent2 .child2').eq(index).attr('id'));
});
注意：我删除了
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="parent"> <div class="child" data-id="xx1">Hello world</div> <div class="child" data-id="xx2">Hello world2</div> <div class="child" data-id="xx3">Hello world3</div> </div> <div class="parent2"> <div class="child2" id=""></div> <div class="child2" id=""></div> <div class="child2" id=""></div> </div>数组以明确答案..如果您需要，请确保您可以像添加它一样添加
答案 1 :(得分：0)
我认为，以下方法是脆弱的，因为它假设.child和.child2元素的比例为1：1;但是有可能这样做（虽然我主张尝试分配适当的id服务器端而不是在客户端执行此操作;在所有元素可能不需要id属性之后，取决于你想要做的事情）：
// cache the relevant elements:
let firstGroup = $('.child'),
secondGroup = $('.child2');
// iterate over the secondGroup, and update the `id`
// property of each, using the .prop() method:
secondGroup.prop('id',
// here we use an arrow function expression,
// 'index' is the index of the current element
// of the collection over which we're iterating,
// '_' is the currently assigned id of the current
// element in that group.
// here we find the element of the firstGroup collection
// at the same index as the current element, and
// retrieve its data-id attribute, which is assigned
// as the id:
(index, _) => firstGroup.eq(index).data('id'));
let firstGroup = $('.child'),
secondGroup = $('.child2');
secondGroup.prop('id', (index, _) => firstGroup.eq(index).data('id'));.child::after,
.child2::after {
content: attr(id);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="child" data-id="xx1">Hello world</div>
<div class="child" data-id="xx2">Hello world2</div>
<div class="child" data-id="xx3">Hello world3</div>
</div>
<div class="parent2">
<div class="child2" id=""></div>
<div class="child2" id=""></div>
<div class="child2" id=""></div>
</div>
以上功能与以下内容相同：
let firstGroup = $('.child'),
secondGroup = $('.child2');
// here we use a 'traditional' anonymous function,
// in place of the arrow-function used above:
secondGroup.prop('id', function(index, _) {
return firstGroup.eq(index).data('id');
});
let firstGroup = $('.child'),
secondGroup = $('.child2');
secondGroup.prop('id', function(index, _) {
return firstGroup.eq(index).data('id');
});.child::after,
.child2::after {
content: attr(id);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="child" data-id="xx1">Hello world</div>
<div class="child" data-id="xx2">Hello world2</div>
<div class="child" data-id="xx3">Hello world3</div>
</div>
<div class="parent2">
<div class="child2" id=""></div>
<div class="child2" id=""></div>
<div class="child2" id=""></div>
</div>
当然，这也可以用普通的JavaScript重现：
let firstGroup = Array.from(document.querySelectorAll('.child')),
secondGroup = Array.from(document.querySelectorAll('.child2'));
// iterating over the secondGroup NodeList, using
// Array.prototype.forEach():
secondGroup.forEach(
// using an Arrow function again,
// 'el' the current element of the Array over
// which we're iterating,
// 'index' the index of the current element in
// that Array.
// here we set the id of the current element ('el')
// to the value retrieved from the data-id attribute:
(el, index) => el.id = firstGroup[index].dataset.id
);
let firstGroup = Array.from(document.querySelectorAll('.child')),
secondGroup = Array.from(document.querySelectorAll('.child2'));
secondGroup.forEach(
(el, index) => el.id = firstGroup[index].dataset.id
);.child::after,
.child2::after {
content: attr(id);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="child" data-id="xx1">Hello world</div>
<div class="child" data-id="xx2">Hello world2</div>
<div class="child" data-id="xx3">Hello world3</div>
</div>
<div class="parent2">
<div class="child2" id=""></div>
<div class="child2" id=""></div>
<div class="child2" id=""></div>
</div>
再次，使用传统的＆＃39;匿名函数而不是Arow函数：
let firstGroup = document.querySelectorAll('.child'),
secondGroup = document.querySelectorAll('.child2');
secondGroup.forEach(
function(el, index) {
el.id = firstGroup[index].dataset.id;
});
let firstGroup = document.querySelectorAll('.child'),
secondGroup = document.querySelectorAll('.child2');
secondGroup.forEach(
function(el, index) {
el.id = firstGroup[index].dataset.id;
});.child::after,
.child2::after {
content: attr(id);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="child" data-id="xx1">Hello world</div>
<div class="child" data-id="xx2">Hello world2</div>
<div class="child" data-id="xx3">Hello world3</div>
</div>
<div class="parent2">
<div class="child2" id=""></div>
<div class="child2" id=""></div>
<div class="child2" id=""></div>
</div>