在动态元素中插入父元素ID

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="callout"中插入一个div class="edit-image"

我想做的是从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插入新元素。