当单击元素时获取索引然后传递它以触发另一个事件

Question

我有很多重复的父母，每个人都有8个.fader-empty div。我试图在点击时得到子div的数量（这似乎是有效的），但后来我试图传递索引号，以便我可以为每个具有相同索引的第二个父类添加一个类。

例如，我点击第3个子div。它应该抓住第二个父级并在该区域中添加一个类（突出显示）第三个子div。

我希望这是有道理的。

到目前为止，这是我能管理的全部内容：

$('.fader-empty').click(
    function(){
        var index = $(this).index();
        alert(index);
        $('.fader-section').find('.fader-empty:nth-child(3)').addClass('shoo');

});

这是Demo Fiddle。

Answer 1

阅读您的问题似乎要求突出.fader-empty元素的.fader-section单元格，这些元素出现在.fader-empty元素下面的“列”中（可能在上面）你点击了。

要做到这一点，它是有意义的，几乎是一个先决条件（除非你在一个非常封闭和受控制的环境中运行），首先要确定你点击的元素所在的列，以及然后，在找到您单击的元素的索引后，将给定的类名应用于该同一列中该相同索引的所有其他元素。

要做到这一点，我建议如下：

// first a simple jQuery plug-in to identify the columns:
(function ($) {
    $.fn.identifyColumn = function () {

        // initialising the column-count at 0:
        var column = 0,

        // finding the offset().top position of
        // the first element of the collection:
            topOffset = this.eq(0).offset().top;

        // iterating over each element in the collection
        // here 'this' is the jQuery object/collection,
        // itself, inside the each() loop 'this' refers
        //  to individual elements inside of that
        // jQuery object/collection:
        return this.each(function () {

            // setting the 'data-column' attribute using
            // attr() instead of data(), because I want
            // the column to be amongst the element's
            // attributes, not held in jQuery's data-store
            // (which is initialised by data-* attributes,
            // but the attributes are not updated by
            // setting new data properties with the data()
            // method):
            $(this).attr('data-column', function () {

                // caching the $(this):
                var self = $(this);

                // if the offset().top is the same as
                // the established topOffset then we
                // can infer that we're on the same 'row'
                // as a corollary, if the offset().top
                // is different we can infer we're on a
                // new row:
                if (topOffset !== self.offset().top) {

                    // updating the topOffset with the
                    // offset().top of the new 'row':
                    topOffset = self.offset().top;

                    // resetting the column counter:
                    column = 0;
                }

                // returning the column+<integer> string:
                return 'column' + ++column;
            });
        });
    };
})(jQuery);

// selecting the '.fader-section' elements, and
// applying the plugin:
$('.fader-section').identifyColumn()

    // finding the '.fader-empty' elements within
    // the '.fader-section' elements, and binding
    // an anonymous event-handler for the 'click'
    // event:
    .find('.fader-empty').on('click', function () {

    // caching '$(this)' for subsequent use:
    var self = $(this),

        // finding the index of the clicked element:
        index = self.index(),

        // finding the closest '.fader-section' ancestor,
        // and retrieving its 'data-column' attribute value:
        column = self.closest('.fader-section').attr('data-column');

    // selecting all '.fader-section' elements, and
    // filtering that collection to only those that share
    // the same 'data-column' attribute-value:
    $('.fader-section').filter(function () {
        return this.dataset.column === column;

    // looking within the retained '.fader-section' elements
    // for the '.fader-empty' descendant elements which
    // are also at the equivalent index, using the CSS
    // ':nth-child()' selector, which requires increasing
    // the found index number by 1 (JavaScript is zero-based,
    // CSS is 1-based); and then adding the 'shoo' class to
    // those elements:
    }).find('.fader-empty:nth-child(' + (index + 1) + ')').addClass('shoo');

});

(function($) {
  $.fn.identifyColumn = function() {
    var column = 0,
      topOffset = this.eq(0).offset().top;
    return this.each(function() {
      $(this).attr('data-column', function() {
        var self = $(this);

        if (topOffset !== self.offset().top) {
          topOffset = self.offset().top;
          column = 0;
        }

        return 'column' + ++column;
      });
    });
  };
})(jQuery);

$('.fader-section').identifyColumn()
  .find('.fader-empty').on('click', function() {
    var self = $(this),
      index = self.index(),
      column = self.closest('.fader-section').attr('data-column');

    $('.fader-section').filter(function() {
      return this.dataset.column === column;
    }).find('.fader-empty:nth-child(' + (index + 1) + ')').addClass('shoo');

  });

.new-layer {
  clear: both;
  white-space: nowrap;
  float: left;
  background: #f1f1f1;
  padding: 10px 0px 10px 10px;
  font-size: 0;
}
.sub-layer {
  margin-top: 10px;
}
.fader-section {
  display: inline-block;
  margin-right: 10px;
}
.fader-empty {
  background-color: #e5e7ea;
  border-left: 1px solid #a1a1a1;
  border-top: 1px solid #a1a1a1;
  border-bottom: 1px solid #a1a1a1;
  height: 100px;
  width: 44px;
  display: inline-block;
  position: relative;
  font-size: 12px;
  cursor: pointer;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.shoo {
  background-color: green !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="new-layer">
  <div class="sub-layer">
    <section class="fader-section">
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
    </section>
    <section class="fader-section">
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
    </section>
    <section class="fader-section">
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
    </section>
    <section class="fader-section">
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
    </section>
  </div>
</div>
<!--new layer-->
<div class="new-layer">
  <div class="sub-layer">
    <section class="fader-section">
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
    </section>
    <section class="fader-section">
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
    </section>
    <section class="fader-section">
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
    </section>
    <section class="fader-section">
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
    </section>
  </div>
</div>
<!--new layer-->
<div class="new-layer">
  <div class="sub-layer">
    <section class="fader-section">
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
    </section>
    <section class="fader-section">
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
    </section>
    <section class="fader-section">
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
    </section>
    <section class="fader-section">
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
    </section>
  </div>
</div>

外部JS Fiddle demo，用于实验/开发。

除此之外，只需进行一次小修改，我就添加了从之前选择的元素中删除.shoo类名的机会：

$('.fader-section').identifyColumn()
    .find('.fader-empty').on('click', function () {
    var self = $(this),
        index = self.index(),
        column = self.closest('.fader-section').attr('data-column');

    // this line is the only addition, and simply removes
    // the '.shoo' class-name from all elements that have
    // that class-name:
    $('.shoo').removeClass('shoo');

    $('.fader-section').filter(function () {
        return this.dataset.column === column;
    }).find('.fader-empty:nth-child(' + (index + 1) + ')').addClass('shoo');

});

(function($) {
  $.fn.identifyColumn = function() {
    var column = 0,
      topOffset = this.eq(0).offset().top;
    return this.each(function() {
      $(this).attr('data-column', function() {
        var self = $(this);

        if (topOffset !== self.offset().top) {
          topOffset = self.offset().top;
          column = 0;
        }

        return 'column' + ++column;
      });
    });
  };
})(jQuery);

$('.fader-section').identifyColumn()
  .find('.fader-empty').on('click', function() {
    var self = $(this),
      index = self.index(),
      column = self.closest('.fader-section').attr('data-column');

    $('.fader-section').filter(function() {
      return this.dataset.column === column;
    }).find('.fader-empty:nth-child(' + (index + 1) + ')').addClass('shoo');

  });

.new-layer {
  clear: both;
  white-space: nowrap;
  float: left;
  background: #f1f1f1;
  padding: 10px 0px 10px 10px;
  font-size: 0;
}
.sub-layer {
  margin-top: 10px;
}
.fader-section {
  display: inline-block;
  margin-right: 10px;
}
.fader-empty {
  background-color: #e5e7ea;
  border-left: 1px solid #a1a1a1;
  border-top: 1px solid #a1a1a1;
  border-bottom: 1px solid #a1a1a1;
  height: 100px;
  width: 44px;
  display: inline-block;
  position: relative;
  font-size: 12px;
  cursor: pointer;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.shoo {
  background-color: green !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="new-layer">
  <div class="sub-layer">
    <section class="fader-section">
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
    </section>
    <section class="fader-section">
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
    </section>
    <section class="fader-section">
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
    </section>
    <section class="fader-section">
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
    </section>
  </div>
</div>
<!--new layer-->
<div class="new-layer">
  <div class="sub-layer">
    <section class="fader-section">
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
    </section>
    <section class="fader-section">
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
    </section>
    <section class="fader-section">
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
    </section>
    <section class="fader-section">
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
    </section>
  </div>
</div>
<!--new layer-->
<div class="new-layer">
  <div class="sub-layer">
    <section class="fader-section">
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
    </section>
    <section class="fader-section">
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
    </section>
    <section class="fader-section">
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
    </section>
    <section class="fader-section">
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
    </section>
  </div>
</div>

外部JS Fiddle demo，用于实验/开发。

或者，如果您愿意，通过修改上述选择器，您可以在每个标识的列中只有一个.shoo类：

$('.fader-section').identifyColumn()
    .find('.fader-empty').on('click', function () {
    var self = $(this),
        index = self.index(),
        column = self.closest('.fader-section').attr('data-column');

    // selecting all '.fader-section' elements with a
    // 'data-column' attribute-value equal to that
    // of the 'column' in which we clicked, and finding
    // only the '.shoo' elements in that single 'column'
    // then removing the 'shoo' class from only those
    // elements, leaving other 'columns' untouched:
    $('.fader-section[data-column=' + column + '] .shoo').removeClass('shoo');
    $('.fader-section').filter(function () {
        return this.dataset.column === column;
    }).find('.fader-empty:nth-child(' + (index + 1) + ')').addClass('shoo');

});

(function($) {
  $.fn.identifyColumn = function() {
    var column = 0,
      topOffset = this.eq(0).offset().top;
    return this.each(function() {
      $(this).attr('data-column', function() {
        var self = $(this);

        if (topOffset !== self.offset().top) {
          topOffset = self.offset().top;
          column = 0;
        }

        return 'column' + ++column;
      });
    });
  };
})(jQuery);

$('.fader-section').identifyColumn()
  .find('.fader-empty').on('click', function() {
    var self = $(this),
      index = self.index(),
      column = self.closest('.fader-section').attr('data-column');

    $('.fader-section[data-column=' + column + '] .shoo').removeClass('shoo');
    $('.fader-section').filter(function() {
      return this.dataset.column === column;
    }).find('.fader-empty:nth-child(' + (index + 1) + ')').addClass('shoo');

  });

.new-layer {
  clear: both;
  white-space: nowrap;
  float: left;
  background: #f1f1f1;
  padding: 10px 0px 10px 10px;
  font-size: 0;
}
.sub-layer {
  margin-top: 10px;
}
.fader-section {
  display: inline-block;
  margin-right: 10px;
}
.fader-empty {
  background-color: #e5e7ea;
  border-left: 1px solid #a1a1a1;
  border-top: 1px solid #a1a1a1;
  border-bottom: 1px solid #a1a1a1;
  height: 100px;
  width: 44px;
  display: inline-block;
  position: relative;
  font-size: 12px;
  cursor: pointer;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.shoo {
  background-color: green !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="new-layer">
  <div class="sub-layer">
    <section class="fader-section">
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
    </section>
    <section class="fader-section">
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
    </section>
    <section class="fader-section">
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
    </section>
    <section class="fader-section">
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
    </section>
  </div>
</div>
<!--new layer-->
<div class="new-layer">
  <div class="sub-layer">
    <section class="fader-section">
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
    </section>
    <section class="fader-section">
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
    </section>
    <section class="fader-section">
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
    </section>
    <section class="fader-section">
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
    </section>
  </div>
</div>
<!--new layer-->
<div class="new-layer">
  <div class="sub-layer">
    <section class="fader-section">
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
    </section>
    <section class="fader-section">
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
    </section>
    <section class="fader-section">
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
    </section>
    <section class="fader-section">
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
    </section>
  </div>
</div>

外部JS Fiddle demo，用于实验/开发。

参考文献：

• CSS：
  • CSS attribute-equals ([attribute=value]) selector。
  • :nth-child()。
• JavaScript的：
  • HTMLElement.dataset。
• jQuery的：
  • addClass()。
  • attr()。
  • closest()。
  • data()。
  • eq()。
  • filter()。
  • find()。
  • index()。
  • offset()。
  • on()。
  • removeClass()。

Answer 2

您只需将3替换为(index + 1)，，因为索引从0开始，这就是您的代码应该如何：

$('.fader-empty').click(

   function () {
        var index = $(this).index();
        $('.fader-section').find('.fader-empty:nth-child(' + (index + 1) + ')').addClass('shoo');

});

这是 your Updated Fiddle 。

修改

为了完全匹配点击元素上方的垂直部分，我使用了以下代码：

$('.fader-empty').click(function () {
    var faderIndex = $(this).index();
    var parent = $(this).parent().parent();
    var parentIndex = $(this).parent().index();
    $('.fader-section').each(function () {
        if ($(this).index() === parentIndex) {
            $(this).find('.fader-empty:nth-child(' + (faderIndex + 1) + ')').addClass('shoo');
        }
    });
});

你必须这样做：

1. 获取所点击元素父节的索引

2. 然后迭代相同的类部分，只更改具有相同索引的部分。

再次 the updated Fiddle 。

Answer 3

this 您的效果是什么？

<强> 段：

＆＃13;

＆＃13;

var newLayers = $('.new-layer');
var subLayers = $('.sub-layer');
var faderSections = $('.fader-section');
var faderEmpties = $('.fader-empty');
faderEmpties.click(function() {
  var faderEmptyIndex = $(this).index();
  var faderSectionIndex = $(this).parent().index();
  var subLayerIndex = $(this).parent().parent().index();
  var newLayerIndex = $(this).parent().parent().parent().index();
  subLayers.each(function() {
    $(this)
      .find('.fader-section')
      .eq(faderSectionIndex)
      .find('.fader-empty')
      .eq(faderEmptyIndex)
      .toggleClass('shoo');
  });
});

＆＃13;

.new-layer {
  clear: both;
  white-space: nowrap;
  float: left;
  background: #f1f1f1;
  padding: 10px 0px 10px 10px;
  font-size: 0;
}
.sub-layer {
  margin-top: 10px;
}
.fader-section {
  display: inline-block;
  margin-right: 10px;
}
.fader-empty {
  background-color: #e5e7ea;
  border-left: 1px solid #a1a1a1;
  border-top: 1px solid #a1a1a1;
  border-bottom: 1px solid #a1a1a1;
  height: 240px;
  width: 44px;
  display: inline-block;
  position: relative;
  font-size: 12px;
  cursor: pointer;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.shoo {
  background-color: green !important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="new-layer">
  <div class="sub-layer">
    <section class="fader-section">
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
    </section>
    <section class="fader-section">
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
    </section>
    <section class="fader-section">
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
    </section>
    <section class="fader-section">
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
    </section>
  </div>
</div>
<div class="new-layer">
  <div class="sub-layer">
    <section class="fader-section">
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
    </section>
    <section class="fader-section">
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
    </section>
    <section class="fader-section">
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
    </section>
    <section class="fader-section">
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
    </section>
  </div>
</div>
<div class="new-layer">
  <div class="sub-layer">
    <section class="fader-section">
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
    </section>
    <section class="fader-section">
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
    </section>
    <section class="fader-section">
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
    </section>
    <section class="fader-section">
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
      <div class="fader-empty"></div>
    </section>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

希望这有帮助。

<强> 详细说明：

• 我们的想法是遍历subLayers元素。
• .find()其中包含所有.fader-section个元素。
• 中的所有.fader-section元素，仅通过.eq()方法获得具体内容。
• 其中.find()个.fader-empty个元素。{/ li>
• ，其中只有一个具体的。
• 最后，.toggleClass()就可以了。

我想我应该为好奇的人添加细节。

Answer 4

只需在第一个选择器中添加：odd以选择第二个父级（即第二个，第四个等）

我还用（索引+ 1）替换了3 - 注意它的索引是1（不是0索引）

$('.fader-section:odd').find('.fader-empty:nth-child(' + (index + 1) + ')').addClass('shoo');

Answer 5

＆＃13;

＆＃13;

$('.fader-empty').click(
    function(){        
  		var blockIndex = $(this).index() + 1;
        $(this).parents('.new-layer').find('.fader-section').find('.fader-empty:nth-child('+ blockIndex +')').addClass('shoo');
		
});

＆＃13;

.new-layer {
	clear:both;
	white-space:nowrap;
	float:left;
	background:#f1f1f1;
	padding:10px 0px 10px 10px;
	font-size:0;
}
.sub-layer {
	margin-top:10px;
}
.fader-section {
	display:inline-block;
	margin-right:10px;
}
.fader-empty {
	background-color:#e5e7ea;
	border-left:1px solid #a1a1a1;
	border-top:1px solid #a1a1a1;
	border-bottom:1px solid #a1a1a1;
	height:240px;
	width:44px;
	display:inline-block;
	position:relative;
	font-size:12px;
	cursor:pointer;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
}
.shoo {
    background-color:green !important;
}

＆＃13;

<div class="new-layer">
            <div class="sub-layer">
              <section class="fader-section">
              	<div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
              </section>
              <section class="fader-section">
              	<div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
              </section>
              <section class="fader-section">
              	<div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
              </section>
              <section class="fader-section">
              	<div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
              </section>
            </div>
          </div>


<!--new layer-->

<div class="new-layer">
            <div class="sub-layer">
              <section class="fader-section">
              	<div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
              </section>
              <section class="fader-section">
              	<div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
              </section>
              <section class="fader-section">
              	<div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
              </section>
              <section class="fader-section">
              	<div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
              </section>
            </div>
          </div>
<!--new layer-->

<div class="new-layer">
            <div class="sub-layer">
              <section class="fader-section">
              	<div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
              </section>
              <section class="fader-section">
              	<div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
              </section>
              <section class="fader-section">
              	<div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
              </section>
              <section class="fader-section">
              	<div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
                <div class="fader-empty"></div>
              </section>
            </div>
          </div>

＆＃13;

＆＃13;

＆＃13;

这里更新了你的代码的jsfiddle

Demo Jsfiddle