将样式应用于具有特定值的孙子的祖父母[重复]

Question

我有以下代码：

<div class="photos-wrapper" id="detailPhoto">
    <div class="pseudo">
        <a href="#/123456/">fixedTEXT</a>
    </div>
    <div class="image-wrapper">
       <a href="#"></a>
    </div>
    <div class="activites">
      <a href="#"></a>
    </div>
    <div class="commentaire">
        <a href="#"></a>
    </div>
</div>

我想在第一个和主要的<div class="photos-wrapper" id="detailPhoto"> 中包含我自己的 CSS 样式，但唯一的方法是识别孙选择器，即<a href="#/123456/">，因为有多次出现相同的代码。 也许当我展示我尝试过的东西时会更清楚一点：

a[href*="123456"] > div.pseudo > div.photos-wrapper[id^="detailPhoto"] {
    display: none !important;
}

div.photos-wrapper[id^="detailPhoto"] < div.pseudo < a[href*="123456"] {
    display: none !important;
}

这就是我尝试这样做的方式，但它显然不起作用。 我可能在这里尝试做的事情称为父选择器，但我不太确定。

@编辑 让我们看一下这段代码，它实际上更详细： http://jsfiddle.net/60ezqtL7/

目标是通过 display: none; 样式隐藏包含完全相同值的整个 div 即 <a href="#/000000/">PHOTO 1</a>

Answer 1

在这种情况下（或许多其他情况）不需要使用 jQuery。

detailPhoto.classList.toggle('hide', detailPhoto.querySelector('[href=#/123456]'))

Answer 2

正如我在对您的回答的评论中提到的，没有父母或祖先选择。通过 jQuery 最简单、最有效的方法是 has() method。

$('#detailPhoto').has('a[href*="123456"]').hide(); // or use .addClass() instead

为你使用Google to host jquery。

Demo : 我在演示中使用了类选择器，因为 id 应该是唯一的。

addClass Demo

更新

鉴于您的更新并假设您想显示每张照片中的 1 张且仅显示 1 张，带有相同 href 的照片的其他包装器将被隐藏。

/*Loop through each link in  div with cass psudo 
  in a div with class photos-wrapper*/
var found = {};
$(".photos-wrapper .pseudo a").each(function(){
    var $this = $(this);
    var href = $this.attr("href");
    //if the href has been enountered before, hide the .photos-wrapper ancestor    
    if(found[href]){
        $this.closest(".photos-wrapper").hide();
        /*Other options: 

        Use Css direct
        $this.closest(".photos-wrapper").css("display", "none");

        Assign a duplicate class, then style that class ass appropriate
        $this.closest(".photos-wrapper").addClass("duplicate");
       */
    }else{
    //otherwise add it to the array of what has been found
        found[href] = true;
    }
});

Demo

如果您不熟悉 jquery，请务必阅读它的实现方式以及$(document).ready(); 的目的

更新 2

要隐藏所有具有复制 href 的容器，请使用：

//Loop through each a tag 
$(".photos-wrapper .pseudo a").each(function () {

    var $this = $(this);
    //Get the href
    var href = $this.attr("href");

    //Check if more than one exists
    if ($('.photos-wrapper .pseudo a[href="' + href + '"]').size() > 1) {
        //Hide all .photo-wrapper containers that have  the replicated href
        $('.photos-wrapper .pseudo a[href="' + href + '"]').closest(".photos-wrapper").hide();
    }
});

Another Demo

如果可能的话，我仍然建议在服务器端删除重复项。

总的来说，<center> 标签在 HTML4 中已被贬低，不应再使用。改用 CSS。有很多关于如何使用 CSS 使内容居中的示例。

Answer 3

目前，仅使用 CSS 无法做到这一点，但您可以使用 JQuery 轻松做到这一点。这将搜索#detailPhoto 的后代并隐藏href（将其设置为显示：无；）。

<script>
$(function() {
    $('#detailPhoto').find('a[href$="#/123456/"]').hide();
});
</script>

要搜索父母，你会使用这个。

<script>
$(function() {
    $('a[href$="#/123456/"]').closest('#detailPhoto').hide();
});
</script>

要使用它，您还需要将 JQuery 库添加到文档的头部。

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>