尝试根据分配的jQuery索引号将一个类添加到div

时间:2017-07-11 02:25:08

标签: javascript jquery

我使用以下内容将一系列div添加到我的$ board父级:

    var $board = $('<div id="board"></div>');
    var $row = $('<div class="row"></div>');
    var $cell = $('<div class="box stdBG"></div>')
    var $aRow;
    var $aCell;
    for (var i=0; i < 17; i++){
        $aRow = $row.clone();
        $board.append($aRow);
        for (var j =0; j <25; j++){
            $aCell = $cell.clone();
            $aRow.append($aCell); 
            if (i===8 && j==12){
                $aCell.removeClass('stdBG').addClass('marvin');
                indexI = i;
                indexJ = j;
            }
        }
    } 

这很好用,但后来我尝试添加&#39; marvin&#39;使用以下类对相邻div进行分类:

    indexJ += 1;
    $('.row').eq(indexI).find('.cell').eq(indexJ).addClass('marvin');

它没有做任何事情,我也没有收到任何错误消息。这个菜鸟需要帮助!

2 个答案:

答案 0 :(得分:1)

您的主要问题是您正在寻找不存在的.cell课程。它一定是.box

  。

$(”。行 ')当量(indexI).find(' 的。细胞 ')当量(indexJ).addClass(' 马文);

我已经制作了这个片段并且工作正常:

var indexI = 0,
  indexJ = 0;

var $board = $('#board');
var $row = $('<div class="row"></div>');
var $cell = $('<div class="box stdBG"></div>');

for (var i = 0; i < 17; i++) {
  var $aRow = $row.clone();
  $board.append($aRow);
  for (var j = 0; j < 25; j++) {
    var $aCell = $cell.clone();
    $aRow.append($aCell);
    if (i === 8 && j === 12) {
      $aCell.removeClass('stdBG').addClass('marvin');
      indexI = i;
      indexJ = j;
    }
  }
}

indexJ += 1;
$('.row').eq(indexI).find('.box').eq(indexJ).addClass('marvin');
div {
  line-height: 0
}

.box {
  width: 10px;
  height: 10px;
  display: inline-block;
  border: solid 1px #fff
}

.stdBG {
  background: grey
}

.marvin {
  background: pink
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="board"></div>

答案 1 :(得分:0)

你的问题在这里:

.find('.cell')

必须是.box而不是

$('.row').eq(indexI).find('.box').eq(indexJ).addClass('marvin');

下次如果发生同样的事情(浏览器控制台上没有错误),我建议您使用浏览器开发工具中的监视来检查是否有任何选择器返回错误的项目