在每个元素实例上更新JQuery变量

Question

我想在名为.menuwithimage的div类上运行一段JQuery。以下是代码：

$(document).ready(function() {
    var link = $(".menuwithimage .inner h2").html();
    var text = $(".menuwithimage .inner h2 a").html();

    $(link).insertBefore(".menuwithimage .inner");
    $(".menuwithimage .inner h2 a").replaceWith(text);
    $(".menuwithimage a").empty();
});

这个代码在第一个实例上工作得很好，但是当这个div的另一个实例出现时，变量不会更新，所以它会从它遇到的类名的第一个div中插入内容到后续的div中同一个班级。

有没有办法重新运行此代码作为每个实例的新代码，以便它不会获取旧的可变数据？我已经尝试过使用.each，$ .each（），虽然我们已经按照之前的主题进行了推荐，但却无法使用它。

我真的很感激这方面的帮助。

提前致谢！

在此标记：http://jsfiddle.net/rn15vfn3/

Answer 1

您可以简单地将代码包装到每个循环中（因为您要处理所有.menuwithimage）：

$(".menuwithimage").each(function() {
    var link = $(this).find(".inner h2").html();
    var text = $(this).find(".inner h2 a").html();

    $(link).insertBefore($(this).find(".inner"));

    $(this).find(".inner h2 a").replaceWith(text);
    $(this).find("a").empty();
});

演示：http://jsfiddle.net/rn15vfn3/1/

使用$(this).find(...)，您可以在单个.menuwithimage块中选择必要的元素。

您还可以使代码更简单：

$(".menuwithimage").each(function() {
    var $link = $(this).find(".inner h2 a");
    $(this).find(".inner h2").text($link.text());
    $link.prependTo(this).empty();
});

演示：http://jsfiddle.net/rn15vfn3/2/