在jQuery中添加一些内容的<h3>
标签时遇到一些麻烦。
非常简单,每个div与类.gallery-icon
得到它包含附加到它的锚title
属性。
$(document).ready(function($) {
$(".gallery-icon").each(function() {
$(this).append($(this).find('a').attr('title'));
});
});
问题我面临的是title
刚插入没有任何标签,即:
<div class="gallery-icon">
<a title="Yadda!" href="http://cdn.someecards.com/someecards/usercards/1343964507704_8609552.png"><img src="http://cdn.someecards.com/someecards/usercards/1343964507704_8609552.png" alt="Yadda!"></a>
Yadda!</div>
注意:Yadda!
只是坐在gallery-icon div中而没有任何标签。我希望它包裹在h3
中。
所以理想情况下它会读到:
<div class="gallery-icon">
<a title="Yadda!" href="http://cdn.someecards.com/someecards/usercards/1343964507704_8609552.png"><img src="http://cdn.someecards.com/someecards/usercards/1343964507704_8609552.png" alt="Yadda!"></a>
<h3>Yadda!</h3>
</div>
改变这个:
$(this).append($(this).find('a').attr('title'));
对此:
$(this).append($('<h3/>', {text: $(this).find('a').attr('title')}));
或这个:
$('<h3/>', {
text: $(this).find('a').attr('title')
}).appendTo(this);
$(".gallery-icon").each(function(i, elem) {
$('<h3/>', {
text:$(this).find('a').attr('title')
}).appendTo(this);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gallery-icon">
<a title="Yadda!" href="http://cdn.someecards.com/someecards/usercards/1343964507704_8609552.png">
<img src="http://cdn.someecards.com/someecards/usercards/1343964507704_8609552.png" alt="Yadda!">
</a></div>
即使这样也可以做到:
$(this).append('<h3>'+ $(this).find('a').attr('title') + '</h3>');