Question

如果有人能在我错的地方纠正我，我会很高兴。这太简单了，但是在我错的地方不能解决问题。它应该也是第三个#one div黄色，但它不会......

＆＃13;

if ($('#main #main-two #one').not(':first-child') && ($('#one img').attr('src') == 'http://www.psytrance.pl/artists/atmos/tom.jpg')) {
  $('#one').each(function() {
    $('#one').css("background-color", "yellow");
  });
};

＆＃13;

#one {
  height: 50px;
  width: 50px;
  border: 1px solid black;
  float: right;
}

img {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
  <div id="main-two">
    <div id="one">
    </div>
    <div id="one">
      <img src="http://www.psytrance.pl/artists/atmos/tom.jpg">
    </div>
    <div id="one">
      <img src="http://www.psytrance.pl/artists/atmos/tom.jpg">
    </div>
    <div id="one">
    </div>
  </div>
</div>

＆＃13;

https://jsfiddle.net/nucb6nko/1/

Answer 1

id值必须在文档中是唯一的。因此，您的id="one"元素可能应该是class="one"。

我想你正试图将所有这些内容包含img src "http://www.psytrance.pl/artists/atmos/tom.jp"黄色。如果是这样，我们可以使用:has的选择器执行此操作，并在:has子句中使用属性值选择器：

$('#main-two .one:has(img[src="http://www.psytrance.pl/artists/atmos/tom.jpg"])').css("background-color", "yellow");

.one {
  height: 50px;
  width: 50px;
  border: 1px solid black;
  float: right;
}

img {
  display: none;
}

<div id="main">
  <div id="main-two">
    <div class="one">
    </div>
    <div class="one">
      <img src="http://www.psytrance.pl/artists/atmos/tom.jpg">
    </div>
    <div class="one">
      <img src="http://www.psytrance.pl/artists/atmos/tom.jpg">
    </div>
    <div class="one">
    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

如果“非第一胎”部分也很重要，只需将其添加回选择器，例如：

$('#main-two .one:not(:first-child):has(img[src="http://www.psytrance.pl/artists/atmos/tom.jpg"])').css("background-color", "yellow");

最后，请注意我从选择器中删除了#main。在有效文档中，只能有一个#main-two。组合ID选择器的唯一原因是如果你想让下属的那个被忽略，如果它不在另一个中，我怀疑这不是这里的情况。

在评论中你问过：

...如果我改为.css会使用addClass（'something'）;因为我已经尝试但没有任何反应

是的，这通常是更好的方式。只需在CSS中定义您的类：

.highlight {
  background-color: yellow;
}

...然后使用.addClass("highlight")而不是.css(...)：

$('#main-two .one:has(img[src="http://www.psytrance.pl/artists/atmos/tom.jpg"])').addClass("highlight");

.highlight {
  background-color: yellow;
}
.one {
  height: 50px;
  width: 50px;
  border: 1px solid black;
  float: right;
}

img {
  display: none;
}

<div id="main">
  <div id="main-two">
    <div class="one">
    </div>
    <div class="one">
      <img src="http://www.psytrance.pl/artists/atmos/tom.jpg">
    </div>
    <div class="one">
      <img src="http://www.psytrance.pl/artists/atmos/tom.jpg">
    </div>
    <div class="one">
    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

每个功能都不起作用。 jQuery的

1 个答案: