Question

标记：

<iframe id="portal">
    <div id="callout-1" class="callout">
    </div>

    <div id="callout-2" class="callout">
    </div>
</iframe>

$(document).ready(function(){
    $('#page-portal').load(function(){
        $('#portal').contents().find('.callout')
        .append('<div class="edit-image" id="edit-image-1">Edit This Area</div>');
    });
});

此代码动态地将div class="edit-image"插入每个div class="callout"

我想要做的是从div class="callout"检索ID（数字部分）并将其动态插入到div class="edit-image"

的ID中

我遇到了麻烦，有人可以帮忙吗？

Answer 1

您可以使用Javascript的.split()方法。它应该看起来像这样

$('#portal').find('.callout').each(function(k,v) {
    id = $(this).attr("id"); 
    //take out the id of element

    temp = id.split("-"); 
    //split the string based on "-"

    idnum = temp[1]; 
    //take the second part of split i.e the integer part

    $(this).append('<div class="edit-image" id="edit-image-'+idnum+'">Edit This Area</div>'); 
    //then finally use it
});

这是一个有效的demo

Answer 2

您可以使用

询问元素的ID

var id     = $("selektor").attr("id"),
    number = parseInt(id.split('-')[1]);

http://api.jquery.com/attr/

在您的情况下，您必须遍历文档中的所有.callout，然后解析上面的ID，然后插入具有正确ID的新元素。

将父元素ID插入动态元素

2 个答案: