Question

我有以下div：

<div class="overlay">
    <a title="yes" href="#"><div class="yes"></div></a>
    <a title="no" href="#"><div class="no"></div></a>
</div>

<div class="movie item-parent">
    <a title="Sin city" class="movie-link">
        <img src="images/1.jpg" />
    </a>
    <div class="overlay">
        <a title="yes" href="#"><div class="yes"></div></a>
        <a title="no" href="#"><div class="no"></div></a>
    </div>
</div>

如果用户点击“否”，则Sin city将替换为newproducts.jsp中的另一部电影，如下所示：

<div class="movie item-parent">
    <a title="The Hobbit" class="movie-link">
        <img src="images/2.jpg" />
    </a>
    <div class="overlay">
        <a title="yes" href="#"><div class="yes"></div></a>
        <a title="no" href="#"><div class="no"></div></a>
    </div>
</div>

我的jquery代码是：

$('.no').on("click", function(){
    var parent_movie= $(this).parent('.movie');
    parent_movie.empty();
    parent_movie.load("reco_product_stream.jsp a"); 
    parent_movie.append($('.overlay'));
});

但电影没有被取代。

如果我将.parent更改为.parents，则电影会被替换为正常，但.overlay会从页面上的所有其他电影中删除，尽管有.append，但不会再回来}。

Answer 1

使用closest()代替parent()，因为父母看起来是直接父母，而最近的人会查找第一场比赛的dom。

var parent_movie= $(this).closest('.movie');

Answer 2

$('.no').on("click", function(){
    var $parent_movie = $(this).closest('.movie');
    $.get('reco_product_stream.jsp', function(data) {
        var $a = $(data).find('a'); 
        $parent_movie.children('a').replaceWith($a); 
    })
});

Answer 3

您的代码行：

var parent_movie = $(this).parent('.movie');

仅查看直接父级，仅在该直接父级具有类movie时才匹配。由于HTML中不是这种情况，因此会产生一个空的jQuery对象，因此后续的代码行什么都不做。

由于您要搜索父链，直到找到movie类，请改为使用此类：

var parent_movie = $(this).closest('.movie');

Answer 4

您可以使用：

var parent_movie = $(this).closest('.movie');

将类附加到div不工作

4 个答案: