仅定位页面上的一个元素答案

【问题标题】：Target only one element on page仅定位页面上的一个元素
【发布时间】：2014-09-10 22:33:42
【问题描述】：

我写JS或jQuery已经有一段时间了，现在我遇到了这个新手问题。我试图定位文本所在的一个元素，而不是页面上具有相同类的所有元素。

我正在尝试将用户在照片标题中的第一条粗体线放入其他元素中。这段代码有效，但我需要确保它不一样。就像用户有 2 张照片而其他有标题一样，它应该像在这段代码中一样被复制。

这里：我的 HTML（带有 Tumblr 助手）：

{block:Photoset}
                    <div class="photoset-grid" data-layout="{PhotosetLayout}">
                        <div class="photoset-posts">
                            <div class="wrap">
                                {block:Photos}<img src="{PhotoURL-HighRes}"/>     {/block:Photos}
                            </div>
                            <div class="background-wrap"></div>
                        </div>
                        <a class="post-date" href="{Permalink}">{TimeAgo}</a>
                        {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
                        <div class="post-details">
                            {block:HasTags}
                            <div class="post-details-tags">
                                {block:Tags}<a href="{TagURL}">#{Tag}</a>{/block:Tags}
                            </div>
                            {/block:HasTags}
                            <div class="post-details-buttons">
                                <i>{LikeButton}</i>
                                <i>{ReblogButton}</i>
                            </div>
                        </div>
                    </div>
                    {/block:Photoset}

这是我的 JS：

// variables
var $photoCaption = $(".photo .wrap .caption strong:first-child").text();
var $removableElement = $(".photo .wrap .caption strong:first-child");

// remove original element
$(".photo .caption strong:first-child").parent().remove();
$removableElement.remove();

// place new element to its place
$(".photo .photo-photo").append("<p class='photo-caption'>" + $photoCaption + "</p>");

谢谢大家。

【问题讨论】：

您的问题是什么？而且，HTML 在哪里？如果我们可以看到您尝试定位的 HTML（包括所有相关的父标记），我们只能帮助您定位页面中的一个特定 HTML 元素。仅供参考，您可能想要使用 jQuery 的 .replaceWith()，它可以一步完成删除和添加。
@jfriend00 好的，请稍等。
不确定我是否正确理解了这个问题。这是你想要的？ stackoverflow.com/questions/11324559/…
请上传一些html供参考
@KD 场景如下：用户提交使 Tumblr 标题上的第一行变为粗体，我试图将第一个粗体放入另一个元素，我将把它放在另一张图片的顶部。这就像一个图片说明。

标签： javascript jquery tumblr

【解决方案1】：

您在回复 jfriend 时发布的 jsFiddle 有助于澄清您的意思。

我想我会尝试以下方法：

$(".photo .caption").each(function() {
    var $strongChildren = $(this).children('strong');
    if ($strongChildren.length > 0) { 
        var $removableElement = $(".photo .caption").children('strong').first();
        var $photoCaption = $removableElement.text();

        // remove original element
        $removableElement.remove();

        // place new element to its place
        $(this).siblings(".photo-photo").append("<p class='photo-caption'>" + $photoCaption + "</p>");
    }
});

还有其他方法可以做到这一点。例如，您还可以找到所有第一个子字符串，然后调用 $removableElement.closest('.photo'); 以仅获取其包含的 .photo 元素。

不过，上面的代码应该可以工作。如果您有任何问题，请告诉我。

【讨论】：