使用jQuery只定位一个元素

Question

I have this little problem with my code, and I though guys at Stack Overflow might know how to solve this.

So here's the scenario:

I need to append strong inside p into another element which will be post caption. I have been able to create solution this, but I'm having problem. Photo caption duplicates into other same named elements, which I don't want to happen. So post may have photo caption, but not always, but it still needs to work.

HTML

<div class="post">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ornare erat sit amet nulla  faucibus pharetra. Donec in mauris lorem. Pellentesque egestas aliquet lobortis. Praesent molestie.</p>
</div>
<div class="post">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ornare erat sit amet nulla faucibus pharetra. Donec in mauris lorem. Pellentesque egestas aliquet lobortis. Praesent molestie.</p>
</div>
<div class="post">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ornare erat sit amet nulla faucibus pharetra. Donec in mauris lorem. Pellentesque egestas aliquet lobortis. Praesent molestie.</p>
  <p><strong>This is a caption.</strong></p>
</div>

JS

var $caption = $(".post strong:first-child").text();
var $removable = $(".post strong:first-child");

$(".post strong:first-child").parent().remove();
$removable.remove();

$(".post").append("<p class='post-caption'>" + $caption + "</p>");

Here's Codepen snippet:

http://codepen.io/aleksitappura/pen/auvrE

I'll appreciate all of your help.

Answer 1

For multiple strong tags, you can try this demo:

http://jsfiddle.net/lotusgodkk/7mP8Y/1/

JS:

var i = $(".post strong:first-child");
i.each(function () {
    var elem = $(this);
    var post = elem.parents('.post:first');
    var $caption = elem.text();
    elem.parent().remove();
    post.append("<p class='post-caption'>" + $caption + "</p>");
});

Answer 2

DEMO

You need to save a reference to the source so that you can return the caption there:

var $caption = $(".post strong:first-child").text();
var $removable = $(".post strong:first-child");
//SAVE A REFERENCE TO THE SOURCE/TARGET
var $source = $removable.closest('.post');

$(".post strong:first-child").parent().remove();
$removable.remove();
//ADD TO SOURCE/TARGET
$source.append("<p class='post-caption'>" + $caption + "</p>");

UPDATE

In case you're targeting more than one element, you can use .each as follows and each element will be changed on it's own:

$(".post strong:first-child").each(function() {
    var $caption = $(this).text();
    var $parent = $(this).closest('.post');
    $(this).parent().remove();
    $parent.append("<p class='post-caption'>" + $caption + "</p>");
});

Answer 3

$(".post strong:first-child").parent().remove(); indicates the first strong in each .post .

If you only wanted the first .post you'd do $('.post').first().find('strong'); or $('.post:first-child strong');

Answer 4

Update your jquery code like below.

 var $caption = $(".post strong:first-child").text();
 var $removable = $(".post strong:first-child");

 $(".post strong:first-child").parent().append("<p class='post-caption'>" + $caption + "</p>");

 $removable.remove();

DEMO

EDIT

If you want to do this for all the post section then you have to use each function like below.

 $(".post").each(function(){  
 var $caption = $(this).find("strong:first-child").text();
 $(this).find("strong:first-child").parent().append("<p class='post-caption'>" + $caption + "</p>");
 $(this).find("strong:first-child").remove();
 });

DEMO2