【问题标题】:jQuery Selecting one of multiple elements with the same classjQuery选择具有相同类的多个元素之一
【发布时间】:2015-02-20 23:22:47
【问题描述】:

尝试编写一个简单的脚本,如果另一个类中的“a”同时也是两者的父类(.global__image-outer-wrap--game-medium),则该脚本将更改具有特定类(.global__image-outer-wrap--game-medium)的元素的背景颜色。 giveaway__row-outer-wrap) 有一个特定的类 (giveaway__column--group),以防有多个元素使用 (.giveaway__row-outer-wrap)。

if ( $(".giveaway__row-outer-wrap,a").hasClass("giveaway__column--group") ){
   $(.global__image-outer-wrap--game-medium").css("background-color", "limegreen")};

TL;DR 具有相同类的多个元素;我只需要选择“a”具有特定类别的那些。

我尝试将脚本应用到的网站的 HTML

<div class="giveaway__row-outer-wrap">
  <div class="giveaway__row-inner-wrap">
    <div class="giveaway__summary">
      <h2 class="giveaway__heading">
        <a class="giveaway__heading__name" href="/giveaway/fteQx/fahrenheit-indigo-prophecy-remastered">Fahrenheit: Indigo Prophecy Remastered</a><span class="giveaway__heading__thin">(10P)</span><a class="giveaway__icon" rel="nofollow" target="_blank" href="http://store.steampowered.com/app/312840/"><i class="fa fa-steam"></i></a><i data-popup="popup--hide-games" data-game-id="3962555" class="giveaway__icon giveaway__hide trigger-popup fa fa-eye-slash"></i>
      </h2>
      <div class="giveaway__columns">
        <div><i class="fa fa-clock-o"></i> <span title="Today, 11:59pm">1 minute remaining</span></div><div class="giveaway__column--width-fill text-right"><span title="February 16, 2015, 4:03pm">4 days ago</span> by <a class="giveaway__username" href="/user/UraniumFalconPunch">UraniumFalconPunch</a></div><a href="/giveaway/fteQx/fahrenheit-indigo-prophecy-remastered/groups" class="giveaway__column--group"><i class="fa fa-fw fa-user"></i></a></div>
      <div class="giveaway__links">
        <a href="/giveaway/fteQx/fahrenheit-indigo-prophecy-remastered/entries"><i class="fa fa-tag"></i> <span>10 entries</span></a>
        <a href="/giveaway/fteQx/fahrenheit-indigo-prophecy-remastered/comments"><i class="fa fa-comment"></i> <span>10 comments</span></a>
      </div>
    </div><a href="/user/UraniumFalconPunch" class="global__image-outer-wrap global__image-outer-wrap--avatar-small"><div class="global__image-inner-wrap" style="background-image:url(https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/ef/ef653aea58e8709fd6e13f5fa2b39e3fe7b8e5a9_medium.jpg);"></div></a><a class="global__image-outer-wrap global__image-outer-wrap--game-medium" href="/giveaway/fteQx/fahrenheit-indigo-prophecy-remastered"><div class="global__image-inner-wrap" style="background-image:url(http://cdn.akamai.steamstatic.com/steam/apps/312840/capsule_184x69.jpg);"></div>
    </a>
  </div>
</div>

有多个带有 giveaway_row-outer-wrap 类的 div,但并非所有 div 都有带有 giveaway__column-group 类的“a”元素。

【问题讨论】:

  • $('a.giveaway__row-outer-wrap') ?
  • 我无法解析您的要求。你能发布一些 HTML 并说明应该选择哪些元素吗?
  • 添加了 HTML。这太混乱了,甚至我都迷失在我想要的东西中。基本上,有多个带有 giveaway__row-outer-wrap 的 div,在这些 div 中,有 2 个对我来说很重要的 div:giveaway__columns 有时有“a”类 giveaway__column--group 和 global__image-outer-wrap--game-medium 负责对于我要更改的元素的样式。
  • 我在您的 HTML 中没有看到 giveaway__column-group。所以很难说我的答案是否真的有效。
  • giveaway__column--group 抱歉,忘了第二个“-”

标签: jquery class if-statement selector


【解决方案1】:

使用.has() 选择包含与选择器匹配的元素的元素。

$(".giveaway__row-outer-wrap").has("a.giveaway__column--group").each(function() {
  $(".global__image-outer-wrap--game-medium", this).css("background-color", "limegreen")
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="giveaway__row-outer-wrap">
  <div class="giveaway__row-inner-wrap">
    <div class="giveaway__summary">
      <h2 class="giveaway__heading">
            <a class="giveaway__heading__name" href="/giveaway/fteQx/fahrenheit-indigo-prophecy-remastered">Fahrenheit: Indigo Prophecy Remastered</a><span class="giveaway__heading__thin">(10P)</span><a class="giveaway__icon" rel="nofollow" target="_blank" href="http://store.steampowered.com/app/312840/"><i class="fa fa-steam"></i></a><i data-popup="popup--hide-games" data-game-id="3962555" class="giveaway__icon giveaway__hide trigger-popup fa fa-eye-slash"></i>
          </h2>
      <div class="giveaway__columns">
        <div><i class="fa fa-clock-o"></i>  <span title="Today, 11:59pm">1 minute remaining</span>
        </div>
        <div class="giveaway__column--width-fill text-right"><span title="February 16, 2015, 4:03pm">4 days ago</span> by <a class="giveaway__username" href="/user/UraniumFalconPunch">UraniumFalconPunch</a>
        </div><a href="/giveaway/fteQx/fahrenheit-indigo-prophecy-remastered/groups" class="giveaway__column--group"><i class="fa fa-fw fa-user"></i></a>
      </div>
      <div class="giveaway__links">
        <a href="/giveaway/fteQx/fahrenheit-indigo-prophecy-remastered/entries"><i class="fa fa-tag"></i> <span>10 entries</span></a>
        <a href="/giveaway/fteQx/fahrenheit-indigo-prophecy-remastered/comments"><i class="fa fa-comment"></i> <span>10 comments</span></a>
      </div>
    </div>
    <a href="/user/UraniumFalconPunch" class="global__image-outer-wrap global__image-outer-wrap--avatar-small">
      <div class="global__image-inner-wrap" style="background-image:url(https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/ef/ef653aea58e8709fd6e13f5fa2b39e3fe7b8e5a9_medium.jpg);"></div>
    </a>
    <a class="global__image-outer-wrap global__image-outer-wrap--game-medium" href="/giveaway/fteQx/fahrenheit-indigo-prophecy-remastered">
      <div class="global__image-inner-wrap" >This should be lime green</div>
    </a>
  </div>
</div>

【讨论】:

  • 我已经让它工作了,虽然它看起来不正确。当我在控制台中检查 DOM 时,我看到了 background-color 样式,但它看起来不是绿色的。
  • 我之前没有下划线。
猜你喜欢
  • 1970-01-01
  • 2011-11-30
  • 1970-01-01
  • 2012-06-26
  • 1970-01-01
  • 1970-01-01
  • 2016-08-14
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多