在图像后查找结束锚标记答案

【问题标题】：Find closing anchor tag after image在图像后查找结束锚标记
【发布时间】：2014-08-07 00:35:27
【问题描述】：

我想将 div 移到结束锚标记之后的位置。我得到的只是图像类名。如何找到包裹图像的结束锚标记？

<a href="#"><img class="cat-image" src="http://placekitten.com/200/300" title="Funky roots" /></a>

在 JS Fiddle 上，我有一个示例，我遍历列表以查找具有特定类名的图像。如果该图像存在，我想将'.moveMe' 移动到结束锚标记之后。

很遗憾，我无法修改 html。我无法将 id 或 class 添加到锚点或图像标签或将整个内容包装在 div 中。

HTML：

<ul class='testList'>
    <li class="listItem-0">
        <div class="moveMe"></div> <pre>
        <div class="wrapper">
            <a href="#"><img class="cat-image" src="http://placekitten.com/200/300" title="Funky roots" /></a><!-- moveMe div here -->
        </div>
        <div class="summary"></div>
        </pre>

    </li>
    <li class="listItem-1">
        <div class="moveMe"></div>  <pre>
        <div class="wrapper">
            <div></div>
        </div>
        <div class="summary"></div>
        </pre>

    </li>
    <li class="listItem-2">
        <div class="moveMe"></div>  <pre>
        <div class="wrapper">
            <a href="#"><img class="cat-image" src="http://placekitten.com/300/400" title="bigger cat pic" /></a>
        </div>
        <div class="summary"></div>
        </pre>

    </li>
</ul>

JS：

var listItems = $(".testList li");

listItems.each(function (idx, li) {
    if ($(li).find('.cat-image').length) {
        console.log('listItemContent image==>', $('pre').find('.cat-image'));  
        /*$(li).find('???? </a>  ????').append($(li).find('.moveMe'));*/
    }
    console.log($('.testList').html());
});

JS Fiddle

【问题讨论】：

你可以使用最接近的('a')
移动哪个div？还是您的意思是创建一个新的？
那么问题出在哪里？您可以通过基本的 jQuery 或 DOM 操作知识来完成此操作。
@cookiemonster 这个网站旨在帮助人们提高他们的“基本知识”——从 OP 的小提琴来看，他已经对 jQuery 有了基本的了解，但也许没有更深入的了解，我认为他为什么被问到问题。
小提琴有尝试，让他休息一下

标签： javascript jquery html css dom

【解决方案1】：

尝试在这种情况下使用.after()，

var listItems = $(".testList li");
var cache = null;

listItems.each(function (idx, li) {
    cache = $(li).find('.cat-image');
    if (cache.length) {
      cache.parent().after($(li).find('.moveMe'));
    }
});

DEMO

【讨论】：

@NewHavenGill 很高兴为您提供帮助..！

【解决方案2】：

你可以这样做：

var listItems = $(".testList li");
listItems.each(function (idx, li) {
    var jli = $(li);
    jli.find(".cat-image")
       .closest("a")
       .after(jli.find(".moveMe"));
});

如果您愿意，可以将其简化为一行：

var listItems = $(".testList li");
listItems.each(function (idx, li) {
    $(li).find(".cat-image").closest("a").after($(li).find(".moveMe"));
});

http://jsfiddle.net/MBTNU/5/

【讨论】：

很抱歉问这个问题，但在循环内声明一个变量是一种好习惯..？
@RajaprabhuAravindasamy 这不是一个循环。这是一个匿名函数。所以不，我会说这里没有问题。
each() 显式循环选择器返回的元素；所以是的：这是一个循环。虽然这不一定是一个问题，但它确实会带来*轻微的*低效率/性能损失。并且假设您只使用缓存的选择器/jQuery 对象，一旦不需要初始化变量。
@DavidThomas 它被使用了两次。这就是我使用变量的原因。