JQuery 使用 Prepend 动态设置 ID

Posted

技术标签:

【中文标题】JQuery 使用 Prepend 动态设置 ID【英文标题】:JQuery using Prepend to dynamically set ID 【发布时间】:2013-02-01 13:16:41 【问题描述】:

我想使用 prepend 来动态附加一个带有它正在附加的容器 ID 的 div。我似乎无法让它适用于每个元素,目前它只使用相同的 ID。

html

<div class="advanced-slider" id="About" >
        <p> Content </p>
</div>
<div class="advanced-slider" id="Main" >
        <p> Content </p>
</div>

JS

$('.advanced-slider').wrap('<div class="slider-container"><div class="slider-wrapper"></div></div>');

$('.slider-container').prepend('<div class="slider-title" id="' + $(this).find('.advanced-slider').attr('id') + '-title"></div>');

【问题讨论】:

【参考方案1】:

您的代码中的this 指的是window 对象,请尝试以下操作。

$('.slider-container').prepend(function()
   return '<div class="slider-title" id="' + $(this).find('.advanced-slider').prop('id') + '-title"></div>';
);

http://jsfiddle.net/aPJs5/

【讨论】:

完美。感谢您的快速回复;)|一个简单的问题,使用 prop 而不是 attr 更好吗? @user1872133 不客气,是的,推荐prop方法。【参考方案2】:
$(".slider-container").prepend(function()
    return "<div class=\"slider-title\" id=\"" 
              + $(".advanced-slider", this).attr("id") 
              + "-title\"></div>";
);

【讨论】:

以上是关于JQuery 使用 Prepend 动态设置 ID的主要内容,如果未能解决你的问题,请参考以下文章

jQuery 自学笔记

jQuery 自学笔记

jquery如何动态的添加一条html代码

jQuery .prepend() 使用来自另一个元素的类,如果它以特定单词开头

jQuery prepend() 错误?

jquery给div添加下级元素