使用jquery基于包含类选择父DIV内容



我想根据DIV中的类来抓取DIV的内容,例如,我的页面将包含

<html>
<head></head>
<body>
<div>
<p class="foo">some text</p>
<p>test1</p>
<p>test 2</p>
</div>
</body>
</html>

结果是:

<div>
<p class="foo">some text</p>
<p>test1</p>
<p>test 2</p>
</div>

我试过

$.get("https://some.url.com/index.html", function(my_var) {
console.log($(my_var).closest('div').find('.foo'));  
});

但只是得到一个空的结果?

您应该首先找到.foo,然后使用.closest()选择它的父级

$.get("https://some.url.com/index.html", function(my_var) {
console.log($(my_var).find(".foo").closest('div'));  
});

$(".foo").closest("div").css("color", "red");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
body
<div>
<p class="foo">some text</p>
<p>test1</p>
<p>test 2</p>
</div>
body
</body>
</html>

为了更好的方法,需要首先针对body,而不是找到特定的类find('.foo'),您可以查看以下工作示例:

$(document).ready(function(){
$('body').closest('body').find('.foo').css("color", "red")
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<div>
<p class="foo">some text</p>
<p>test1</p>
<p>test 2</p>
</div>
</body>
</html>

最新更新