Question

我是JavaScript和CSS的新手，我的技能充其量也很差。我知道如何解决我的问题，但我没有解决它的知识我有这样的代码：

<div class="detail">
    <div class="detail-group"></div>
    <div class="detail-group"></div>
    <div class="detail-group"></div>
</div>

我必须在每个.detail-group DIV中附加一个带有唯一#id的现有 DIV。我必须指定.detail-group，即使它们完全相同。 我无权访问HTML以手动编辑。
如果我是正确的，我最好的方法是使用JS为那些.detail-group DIV设置ID 我用CSS用它来定位每一个并创建一个区别：

.detail-group:nth-child(1) { padding-right: 0.01px }
.detail-group:nth-child(2) { padding-right: 0.02px }
.detail-group:nth-child(3) { padding-right: 0.03px }

但我不知道如何用JS检测这种差异并使用它。是否有可能区分JS中元素的顺序？如果有，怎么做。以及如何向他们添加ID？

旁注，我正在使用Enjin模块，这就是为什么我无法访问他们的HTML。如果有人有这方面的经验，将不胜感激。

Answer 1

您可以使用.attr()函数及其回调来使用div元素的索引设置ID：

$('.detail-group').attr('id', function(i) {
  return 'detailgroup'+(i+1);
});

<强> Working Demo

Answer 2

您无需为div分配ID以定位它们。假设以下变量显示为 - 'index of target div = index of element in array', 'ID of existing ID to append'

var ids = ['divid1','divid2','divid3'];

然后，您可以使用以下代码将具有上述ID的div附加到相应的目标DIV：

$('.detail-group').append(function(i) {
    return $('#' + ids[i]);
    //or return $('#divid' + (i+1));
});

或者，假设您可以通过公共类选择现有的DIV，.content-div，divs代表这些div，然后您可以这样做：

var divs = $('.content-div');
$('.detail-group').append(function(i) {
    return divs[i];
});

但是，如果您要为所有三个目标DIV添加相同的div，请考虑删除ID，这样您就不会得到重复的ID：

//select the one DIV
var oneDiv = $('#oneDiv');
//detach it from DOM
oneDiv.detach();
//remove ID
oneDiv.removeAttr('id');
//clone oneDiv and add to the target DIVs
$('.detail-group').append(function() {
    return oneDiv.clone();
});

在没有#id的情况下定位DIV，添加#id

2 个答案: