Question

过去几天我一直在讨论这个问题，我希望有人可以提供帮助。基本上这就是我所拥有的......

<div id="ORDER/SUB/DD" class="box1">content</div>
<div id="ORDER/GIFT/CC" class="box1">content</div>
<div id="ORDER/SUB/CC" class="box1">content</div>

<div id="ORDER/GIFT/CC/1" class="box2">content</div>

然而，所有box1 ID都是动态创建的，我想要的是向chosenOffer div添加一个新类box1，其id是box2的id } div。所以它看起来像以下......

<div id="ORDER/SUB/DD" class="box1">content</div>
<div id="ORDER/GIFT/CC" class="box1 chosenOffer">content</div>
<div id="ORDER/SUB/CC" class="box1">content</div>

<div id="ORDER/GIFT/CC/1" class="box2">content</div>

box2 div将始终具有与box1 div中的一个匹配的id，除了一些额外的字符（如示例中的斜杠和数字）。任何帮助非常感谢！

Answer 1

$('.box1').each(function(){
  var id = this.id;
  var $match = $('.box2[id*="'+id+'"]');

  if($match.length){
    $(this).addClass('chosenOffer');
    return false; // You can stop checking .box1's now
  }
});

DEMO：http://jsfiddle.net/2pcVa/

说明：

我们正在查看.each()的{{1}}，看看我们是否能找到包含当前框ID的.box1。
如果存在.box2，我们会将该类添加到当前$match和.box1 - 这意味着我们无需通过return false;的其余部分，因为我们已经找到了匹配。

我们在CSS中使用属性选择器的强大功能（jQuery使用相同的功能）。 .box1表示“包含” Chris Coyier在这里写了一篇关于他们的好文章：http://css-tricks.com/attribute-selectors/

Answer 2

非常像ahren的回复（并且在找到第一个匹配元素后通过循环退出进行了改进）但使用了旧学校“indexOf”，这对我来说可以很好地匹配ID：

$.each($('.box1'), function() {
  if ($('.box2').attr('id').indexOf(this.id) >= 0) {
    $(this).addClass("chosenOffer");
    return false;
  }
})

Answer 3

这当然可行，但我不确定您使用的是最简单/最强大/可扩展的方法......

我会做的是使用新属性并为相应的项目设置它。这使得它在长期内更易于管理/编辑。

http://www.w3schools.com/jsref/met_element_setattribute.asp

jquery如果element id与其他元素类似，则添加class

3 个答案: