Question

请你看一下this demo，让我知道如何动态地将css类添加到与列表项具有相同id的div中，在这种情况下，我想添加{{1}与list关联的每个div的类。一二三四

到目前为止我有这个jquery：

added

Answer 1

ID必须是唯一的，因此您应该为li和div项目使用不同的ID，例如：

HTML：

<ul class="list-inline">
    <li id="one">one</li>
    <li id="two">two</li>
    <li id="three">three</li>
    <li id="four">four</li>
</ul>
<br />
<div class="box" id="box-one"></div>
<div class="box" id="box-two"></div>
<div class="box" id="box-three"></div>
<div class="box" id="box-four"></div>

JQuery的：

$( document ).ready(function() {
  $("li").click(function(){
    var id = $(this).attr('id'); 
    // If you want the class at one element only:
    $(".box").removeClass("added");
    $("#box-" + id).addClass("added");
  });
});

在这里工作Jsfiddle：http://jsfiddle.net/fgVGj/5/

Answer 2

你做不到。 ID必须在页面上是唯一的。

Answer 3

要解决您的问题，这将有效

$(document).ready(function () { $("li").on("click", function () { var item = $(this).attr('id'); $(".box").attr('id', item); }); });

您将新的attr作为第二个参数传递给.attr()，但是如前所述，应该使用类或数据属性，因为ID是唯一的。

Answer 4

我认为这正是您所寻找的：http://jsfiddle.net/uHP7B/1/

$( document ).ready(function() {

    // cache box list
    var boxes = $(".box");

  $("li").on("click",function(){

      // get list item id
      var item_id = $(this).attr('id'); 

      // check list of boxes for a mattch
      for(var i = 0; i < boxes.length; i += 1){

          // we got a match!
          if( boxes[i].id == item_id){

              alert("match is div containing '" + boxes[i].innerHTML + "'");
          }
      }
  });
});

如何动态地将类添加到div

4 个答案: