javascript - 定位出现在包含特定类的页面上的 div ID - CSS 还是 jQuery？两个都？

Question

我对此很陌生，所以如果我没有正确解释这一点，或者没有提供正确的代码(或提供太多)，请原谅我。

在我的页面顶部附近有这样的代码:

<div id="javo-detail-item-header-wrap" class="container-fluid javo-spyscroll lava-spyscroll" style="padding: 0px; z-index: 1;">

然后在页面下方:

<div id="post-2355" class="single-item-tab post-2355 property type-property status-publish has-post-thumbnail hentry property_type-ny property_status-sold">

我想从第一行代码定位到 #javo-detail-item-header-wrap，但仅当 .property_status-sold 也在页面上时。

据我了解，不可能通过 CSS 的后代来定位元素，对吧？我在网上看到过类似的情况，通过使用 jQuery 重命名第一个 ID 来解决 - 这是这里需要做的吗？

如果第二个元素不在同一个 div 中，它是否是第一个元素的后代？

Answer 1

如果没有看到完整的代码结构，我会说 99% 不可能使用纯 CSS。用 JavaScript 来做这件事应该很容易:

function getIt() {
  if (document.getElementsByClassName('property_status-sold').length > 0)
    return document.getElementById('javo-detail-item-header-wrap');
}

要获取元素，只需调用函数 getIt (并给它一个更好的名称) - 它将返回元素引用，或 undefined如果 .property_status-sold未找到或实际元素 #javo-detail-item-header-wrap由于某种原因丢失了。

<小时/>

如果您真的非常喜欢 jQuery，请看上面的代码(请注意，它返回一个 jQuery 对象，而不是元素引用 - 您可以使用 .get(0) 来引用元素):

function getIt() {
  if ($('.property_status-sold').length > 0)
    return $('#javo-detail-item-header-wrap');
}

<小时/>

隐藏该元素的快速修复:

jQuery(document).ready(function(){
  if (jQuery('.property_status-sold').length > 0)
    jQuery('#javo-detail-item-header-wrap').hide();
})

这就是您所需要的。