0

所以假设我有这样的文章场景：左边有一张照片，图片后面是文章的内容。在内容区域我有一个预订按钮。如果文章被保留，那么它将在照片底部显示一个小图像（透明写成“保留”）。这东西都搞定了。

我接下来要做的是从文章中删除超链接按钮“保留”（如果已保留）。应该是这样的：

  1. -NormalIMG- [预约按钮]
  2. -NormalIMG- [预约按钮]
  3. -保留IMG- *
  4. -NormalIMG- [预约按钮]
  5. -保留IMG- *
  6. -NormalIMG- [预约按钮] 等等。*这里没有预订按钮

所以它是这样的：储备 

<!-- reserved article -->
 <div class="article">
  <div class="image"></div>
  <div class="image-reserved"><img src="reserved.jpg" /></div>
   <div class="content">
     <a href="#" class="reserveLink">Reserve</a>
   </div>
 </div>
<!-- reserved article //-->

<!-- unreserved article -->
<div class="article">
 <div class="image"></div>
 <div class="image-reserved"></div>
  <div class="content">
   <a href="#" class="reserveLink">Reserve</a>
  </div>
</div>
<!-- unreserved article //-->

<!-- reserved article -->
 <div class="article">
  <div class="image"></div>
  <div class="image-reserved"><img src="reserved.jpg" /></div>
   <div class="content">
     <a href="#" class="reserveLink">Reserve</a>
   </div>
 </div>
<!-- reserved article //-->

我尝试使用 jQuery 是这样的：

if(!($('.image-reserved').find(img))) {
    $('.reserveLink').addCSS('display', 'none');
}

但是我删除了所有“保留”链接...

我意识到我需要一些东西，只有在找到元素“img”之后才应该应用该 CSS 属性。之后，它应该继续搜索并在必要时应用它。

我整天都在试图找出一种方法来摆脱这种情况，方法是实现类似于上述示例的不同结构（使用 find、has、next 等）......但没有成功。

作为最后的手段，我在这里发帖，我的希望完全失去了似乎很容易实现的东西......

重要提示：我知道结构看起来很奇怪，而且对于我想要实现的东西可能真的很难，但我不允许修改任何已经编写的代码。

4

4 回答 4

0

您应该遍历每个 image-reserved ：

// For each image reserved
$(".image-reserved").each(function(){
    // Count the children
    var count = $(this).children("img").length;
    // If there's a child (The reserved img), then we delete the following links
    if(count > 0){
        $(this).next().children(".reserveLink").hide();  
    }
});
于 2013-08-05T18:09:52.363 回答
0

$('div.image-reserved:not(:empty)+.content a.reserveLink')将找到所有.image-reserved具有内容的 div，并选择它们后面的元素中的.reserveLink链接。.content

于 2013-08-05T18:14:45.293 回答
0

$('.image-reserved').next().hide()

于 2013-08-05T18:04:49.903 回答
0

我建议：

$('.content').filter(function(){
    return $(this).prev('div.image-reserved').find('img').length;
}).find('a').remove();

JS 小提琴演示。

参考：

于 2013-08-05T18:05:07.420 回答