如何在H标签中包装jQuery内容?

问题描述 投票:0回答:1

在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>
javascript jquery append
1个回答
0
投票

改变这个:

$(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>');
© www.soinside.com 2019 - 2024. All rights reserved.