jQuery 在父级中查找 Div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13364592/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Find Div within Parent
提问by Jako
I'm not sure I worded this correctly. But I have an HTML document setup something similar to this.
我不确定我的措辞是否正确。但是我有一个与此类似的 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 -->
I'm trying to target the page_textdiv if someone clicks on a car_story li. But because there are two divs that have page_text, I don't know how to target the one which is in the same parent div as the car_story ul. Hope this makes sense. Thanks!
我想针对page_textDIV，如果有人点击了car_story li。但是因为有两个 div page_text，我不知道如何定位与car_story ul. 希望这是有道理的。谢谢！
I've tried things similar to this, but with no luck.
我尝试过类似的事情，但没有运气。
$(".car_story li").click(function() {
$(this).parent().find(".page_text img").attr("src","newimage.jpg");
});
回答by ?????
Pass in the closest div.sub_page as the context in the selector, then the element you want to find
在选择器中传入最近的 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
});
回答by Adriano Carneiro
$(".car_story li").click(function() {
$(this).parents("div").find(".page_text > img").attr("src","newimage.jpg");
});
回答by Sushanth --
Try closest()
尝试 closest()
$(".car_story li").click(function() {
$(this).closest('.sub_page').find(".page_text img")
.attr("src","newimage.jpg");
});
回答by Gary
This has the same result, but I think it is more clear as to what result you will get in all cases (for example if you had another page possibly ajaxed in that also happened to have a li with the car_story class then this click event will still only fire for the spark_page.):
这有相同的结果，但我认为在所有情况下你会得到什么结果更清楚（例如，如果你有另一个页面可能被 ajaxed 也恰好与 car_story 类有一个 li 那么这个点击事件将仍然只为 spark_page 触发。）：
$(".car_story li").click(function() {
$('div#spark_page').find(".page_text img").attr("src","newimage.jpg");
});
Of course if you were to ajax in more html with li car_story s and wanted to change the source of all of the .page_text img then I think you could do
当然，如果您要使用 li car_story 在更多 html 中进行 ajax 并想更改所有 .page_text img 的来源，那么我认为您可以这样做
$(".car_story li").click(function() {
$(".page_text img").attr("src","newimage.jpg");
});
