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

【问题标题】：How to apply jquery only to the element selected with if statement?如何仅将 jquery 应用于使用 if 语句选择的元素？
【发布时间】：2018-05-20 16:22:16
【问题描述】：

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

我需要做的是仅将 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;
   }
});

我已经很好地选择了元素并且 jquery 正在运行。我知道这一点，因为我收到了显示该部分 (if ( $(this).css('background-image').indexOf('mystringzzz') ) {) 有效的警报弹出窗口。

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

如果我使用：

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

结果是它仅适用于页面上的第一次重复，而不是选定的重复。

或者，如果我使用：

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

然后结果是它应用页面上的每个重复，不仅选定的。它应该只是被选中的那个。

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

例如，

a) 在.repeated-element 里面，
b) 仅在外部样式表中包含 background-image css，其中部分图像名称为 mystringzzz,
c) 然后应用新的 jquery（在本例中添加另一个类）。
d) 但不要将其应用于background-image 中不包含mystringzzz 字符串的元素。

【问题讨论】：

我认为您的意图是仅应用于具有该背景的选定元素，对吧？
@Burimi 没错，这是我的意图。

标签： javascript jquery css function each

【解决方案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');

【讨论】：

感谢您更新，我看到您已修复它。会试试的。
过滤器会将集合缩小到您在回调中指定的任何内容。
很高兴听到！很高兴我能提供帮助。
我想看看如何在我的 IF 语句中使用并修复它以使其以这种方式工作，因为这并没有解决我最初的问题，即使它解决了我的具体问题问题。无论如何，我选择了最好的，但希望看到使用 if 语句的特定解决方案。例如，实际上，这只适用于连接一些 jquery，如.addClass。 It does not work if you want to run some jquery code like an alert for example.
哦！非常感谢，我现在看到了我的代码错误，我需要!== -1。我没有意识到那的重要性。再次感谢！

【解决方案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;
   }
});

【讨论】：

@user7783780 不，看起来不像。在您的回答中，您没有任何事件处理程序。请修正您的答案，并说明您的问题是什么。
您所做的只是将each 更改为click。这没有用。我需要它在页面加载而不是点击时运行。元素永远不会被点击。没有与元素的交互。

【解决方案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>

【讨论】：