如何仅将 jquery 应用于使用 if 语句选择的元素？

Question

我正在尝试 select 页面上的某个元素。所有元素都具有相同的 class 相同的一切，唯一的例外是其中一些元素的背景图像不同。

我需要做的是仅将 jquery 代码应用于通过 if 语句选择的元素。

请注意我无法编辑 HTML，我需要为此使用 jquery。

这是我的代码：

$('.repeated-element').each( function(){
   if ( $(this).css('background-image').indexOf('mystringzzz') ) {
    //do something
      alert("works");
      $(this).closest('div.someclass').addClass('aclassilike');
    //stop loop
      return false;
   }
});

我已经 select 编辑了元素，jquery 是运行。我知道这一点，因为我收到了显示该部分 (if ( $(this).css('background-image').indexOf('mystringzzz') ) {) 有效的警报弹出窗口。

但是，问题是我只能让它应用于第一个元素（不是 selected 的元素）或所有元素。

如果我使用：

$(this).closest('div.someclass').addClass('aclassilike');

结果是它仅适用于页面上的第一个重复项，而不适用于 selected 的重复项。

或者如果我使用：

$('.repeated-element').closest('div.someclass').addClass('aclassilike');

然后结果是它应用页面上的每个重复，不仅 selected 的。它应该只是 selected 的一个。

如何才能仅将 jquery 代码应用于通过 if 语句选择的元素？

例如，

a) inside the .repeated-element,
b) ONLY which contains a background-image css in the external stylesheet which has part of the image name as mystringzzz,
c) then apply the new jquery (in this example adding another class).
d) But do not apply it to elements which do not contain the mystringzzz string in background-image.

Answer 1

问题的根源是您在 indexOf() 调用中没有检查索引是否不等于 -1。如果您以问题的原始格式编写此内容，它将如下所示：

$('.repeated-element').each(function() {
   if ($(this).css('background-image').indexOf('mystringzzz') !== -1) {
     //do something
      alert("works");
      $(this).closest('div.someclass').addClass('aclassilike');
      //stop loop
      return false;
   }
});

综上所述，jQuery 的方法根据场景有特定的用例。我强烈建议在这种情况下只使用 filter()：

$('.repeated-element').filter(function() {
  return $(this).css('background-image').indexOf('mystringzzz') !== -1;
}).closest('div.someclass').addClass('aclassilike');

Answer 2

如果您只对所选元素感兴趣，则可以直接从任何事件处理程序使用 DOM。

$('.repeated-element').click(function(){
  if ( $(this).css('background-image').indexOf('mystringzzz') ) {
    //do something
      alert("works");
      $(this).closest('div.someclass').addClass('aclassilike');
    //stop loop
      return false;
   }
});

Answer 3

看来您还需要从 background-image 属性

中删除 url

$('.repeated-element').each(function() {
  // removing url and only getting the image 
  var getURL = $(this).css('background-image').replace('url(', '').replace(')', '').replace(/\"/gi, "");
  if (getURL.indexOf('mystringzzz') !== -1) {
    $(this).closest('div.someclass').addClass('aclassilike');
  }

});

.repeated-element {
  color: red
}

.aclassilike {
  background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='someclass'>
  <div style='background-image:url("mystringzzz")' class='repeated-element'>1</div>
</div>

<div class='someclass'>
  <div class='repeated-element'>1</div>
</div>
<div class='someclass'>
  <div class='repeated-element'>1</div>
</div>
<div class='someclass'>
  <div style='background-image:url("mystringzzz")' class='repeated-element'>1</div>
</div>

如何仅将 jquery 应用于使用 if 语句选择的元素？

How to apply jquery only to the element selected with if statement?

javascript

css

each

jquery

function