Question

我的代码存在这个小问题，而Stack Overflow的人可能知道如何解决这个问题。

所以这是场景：

我需要将strong内的p附加到另一个元素中，该元素将成为帖子标题。我已经能够创建解决方案，但我遇到了问题。照片标题重复到其他相同的命名元素，我不想发生。所以帖子可能有照片标题，但并非总是，但它仍然需要工作。

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>");

这是Codepen代码段：

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

我将非常感谢你的帮助。

Answer 1

对于多个strong标记，您可以尝试此演示：

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

您需要保存对source的引用，以便您可以在那里返回标题：

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

如果您定位的是多个元素，可以使用.each，如下所示，每个元素都会自行更改：

$(".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();表示每个strong中的第一个.post。

如果您只想要.post $('.post').first().find('strong');或$('.post:first-child strong');

Answer 4

更新您的jquery代码，如下所示。

 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

修改

如果您想对所有帖子部分执行此操作，则必须使用如下所示的each功能。

$(".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

使用jQuery仅定位一个元素

4 个答案: