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>

我希望将自己的CSS样式包含在第一个和主<div class="photos-wrapper" id="detailPhoto">中，但唯一的方法是识别孙子选择器，即<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;
}

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

@edit 我们来看看这段代码吧，它实际上更加详细： 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

目前还没有办法只使用CSS，但你可以使用JQuery轻松完成。这将搜索#detailPhoto的后代并隐藏href（将其设置为display：none;）。

<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>

Answer 3

正如我在你对你的回答的评论中提到的那样，没有父母或祖先的选择。通过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集中内容，有很多例子。

将风格应用于具有特定价值的孙子的祖父母

3 个答案: