jQuery查找父元素内的div

Question

我不确定我表达得是否正确。但是，我有一个类似于这样的 HTML 文档设置。

<div id="intro_page" class="sub_page">

        <div class="sub_header"><img src="assets/img/intro_header.jpg" /></div>

        <div class="video_holder">
            <video class="video_player"></video>
        </div>

        <div class="page_text"><img src="" width="1020" /></div>


</div><!-- /intro_page -->

and

<div id="spark_page" class="sub_page car_page">

            <div class="sub_header"><img src="assets/img/header.jpg" /></div>

            <div class="video_holder">
                <video class="video_player"></video>
            </div>

            <ul class="car_story">
                <li data-text="story1_text"><img src="assets/img/story1_btn2.jpg" /></li>
                <li><img src="assets/img/story2_btn2.jpg" /></li>
                <li><img src="assets/img/story3_btn2.jpg" /></li>
            </ul>


            <div class="page_text"><img src="" width="1020" /></div>

</div><!-- /spark_page -->

我试图在某人点击car_story li时，定位到包含此元素的父div中的page_text div。但是由于有两个具有page_text的div，我不知道如何定位与car_story ul相同的父div中的那个。希望这样说得清楚。谢谢！ 我尝试过类似于这样的方法，但没有成功。

$(".car_story li").click(function() {

    $(this).parent().find(".page_text img").attr("src","newimage.jpg");

});

- Jako

Answer 1

将最近的div.sub_page作为选择器中的上下文传入，然后找到您想要查找的元素。

$(".car_story li").click(function() {
    var parent = $(this).closest('.sub_page'); // find closest sub_page
    $(".page_text img",parent).attr("src","newimage.jpg"); // find img inside of closest sub_page
});

- wirey00

Answer 2

$(".car_story li").click(function() {
    $(this).parents("div").find(".page_text > img").attr("src","newimage.jpg");
});

- Adriano Carneiro

---

似乎对我没有起作用。图像的src没有改变。 - Jako

虽然这样可以工作，但我正在寻找使用相同代码行的方法来处理其他不一定是#spark_page的div。 - Jako

最终我选择了与你的方案相似的解决方案，不过你帮助了我找到正确的方向。谢谢！$(this).parents(".sub_page").find(".page_text > img").attr("src","new_image.jpg"); - Jako

刚刚修改了代码以满足您对更可重用代码的需求。别忘了接受最有帮助的答案。 - Adriano Carneiro

Answer 3

尝试使用 closest()。

$(".car_story li").click(function() {

    $(this).closest('.sub_page').find(".page_text img")
                                .attr("src","newimage.jpg");

});

- Sushanth --

Answer 4

这个代码的结果是相同的，但我认为它更清晰地表明了在所有情况下你将得到什么结果（例如，如果你有另一个页面可能通过ajax加载，也恰好有一个带有car_story类的li元素，那么这个点击事件仍然只会触发spark_page的事件）：

$(".car_story li").click(function() {
    $('div#spark_page').find(".page_text img").attr("src","newimage.jpg");
});

当然，如果您要使用li car_story s ajax加载更多html，并想要更改所有.page_text img的源，则可以这样做。

$(".car_story li").click(function() {
    $(".page_text img").attr("src","newimage.jpg");
});

- Gary