0

我有以下 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>

如果用户单击“否”，则罪恶之城将被 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.

4

4 回答 4

2

使用closest()而不是parent() 作为父级查找直接父级，并且最接近查找第一个匹配的 dom。

var parent_movie= $(this).closest('.movie');
于 2012-12-24T10:25:09.210 回答
1 
$('.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); 
    })
});
于 2012-12-24T10:36:27.440 回答
0

您的代码行：

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

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

由于您想搜索父链直到找到一个movie类，请改用它：

var parent_movie = $(this).closest('.movie');
于 2012-12-24T10:27:24.510 回答
0

您可以使用：

var parent_movie = $(this).closest('.movie');
于 2012-12-24T10:30:36.103 回答