jquery - 在元素的每个实例上更新 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() 和 while ，正如前面主题所建议的那样，但不能完全让它工作。

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

提前致谢!

此处标记: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 block 中选择必要的元素。

您还可以使代码更简单:

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