分开分组

Question

http://jsfiddle.net/iaezzy/wu5hk/1/

<div class="coach-group">
    <div class="coach">1</div>
    <div class="coach">2</div>
    <div class="coach">3</div>
    <div class="coach">4</div>
    <div class="coach">5</div>
    <div class="coach">6</div>
    <div class="coach">7</div>
    <div class="coach">8</div>
</div>
second set
<div class="coach-group">
    <div class="coach">1</div>
    <div class="coach">2</div>
    <div class="coach">3</div>
    <div class="coach">4</div>
    <div class="coach">5</div>
    <div class="coach">6</div>
    <div class="coach">7</div>
</div>

正如您在示例中所看到的，我无法将组分开...在第一组中选择第7个将第2组中的第2个视为该行的第5个元素。

如何在不编辑标记的情况下单独处理每个组？

Answer 1

将缓存的elements变量更新为当前.coach-group上下文

JS：

...
$('.coach-group').children(".coach").click(function(){
    elements = $(this).closest(".coach-group").children(".coach"); // kinda ugly but the idea is to update elements list to .coach-group context
    container.children().removeClass('selected'); // reset selected element
    $(this).addClass('selected'); // mark new selected element
...

小提琴：http://jsfiddle.net/Varinder/NnKKc/1/

修改

以下是一些更新：

添加了一些自定义样式（essentialy - 只是一个固定的高度）平滑了slideUp和slideDown

移动箭头指针通过CSS定位（失去IE7兼容性 - 好吧），布局略微偏离（确保可以轻松修复）

无论如何，在JS方面进行了一些重大的重构，并且是最终结果。

//possibly encapsulate this whole shenanigan in a self invoking function?

$cell = $(".coach");
$coachGroup = $(".coach-group");

var cellWidth = $cell.width();
var containerWidth = $coachGroup.width();
var cellsInRow = Math.floor( containerWidth / cellWidth );

var currentSectionIndex = -1;
var currentSelectedElementIndex = -1;
var currentEdgeElementIndex = -1;

function resetSection( $section ) {
    $section.find(".selected").removeClass("selected");
    $section.find(".edge").removeClass("edge");
    $section.find(".info-bg").slideUp( function() { $(this).remove(); } );
    currentSelectedElementIndex = -1;
    currentEdgeElementIndex = -1;
}

function getEdgeElementIndexFrom( currentIndex ) {
    var rowNumber = Math.floor( currentIndex / cellsInRow ) + 1;
    var lastElementIndex = rowNumber * cellsInRow;
    return lastElementIndex;
}

function handleClick( $cell, $activeSection ) {
    var selectedElementIndex = $cell.index();
    var $allCells = $activeSection.children();

    $(".selected").removeClass("selected");
    $cell.addClass("selected");

    var edgeElementIndex = getEdgeElementIndexFrom( selectedElementIndex );
    var totalElements = $activeSection.children().length;

    if ( edgeElementIndex > totalElements ) {
        edgeElementIndex = totalElements;
    }

    edgeElementIndex = edgeElementIndex - 1;

    if ( edgeElementIndex == currentEdgeElementIndex ) {
        console.log( selectedElementIndex );
        console.log( currentSelectedElementIndex );
        if ( selectedElementIndex == currentSelectedElementIndex ) {
            var $infoBg = $(".info-bg");
            if ( $infoBg.is(":visible") ) {
                $infoBg.slideUp();
                $cell.removeClass("selected");                    
            } else {
                $infoBg.slideDown();    
                $cell.addClass("selected");
            }
        } else {
            currentSelectedElementIndex = selectedElementIndex;
            $(".info-bg").slideDown();
        }

    } else {
        currentEdgeElementIndex = edgeElementIndex;
        var $edgeCell = $allCells.eq( currentEdgeElementIndex ); 

        $allCells.find(".edge").removeClass("edge");
        $edgeCell.addClass("edge");

        $(".info-bg").slideUp( function() { $(this).remove(); } );

        var $info = $(".info-template").clone();
        $info.removeClass("info-template").addClass("info-bg");

        $edgeCell.after( $info );

        $info.slideDown();
    }
}

$cell.on("click", function() {
    var $this = $( this );
    var $activeSection = $this.closest( ".coach-group" );
    var activeSectionIndex = $activeSection.index();

    if ( currentSectionIndex != activeSectionIndex  ) {
        var $oldSection = $coachGroup.eq( currentSectionIndex );
        resetSection( $oldSection );

        currentSectionIndex = activeSectionIndex;
    }

    handleClick( $this, $activeSection );
});

更新了小提琴：http://jsfiddle.net/Varinder/65QQ3/6/

Answer 2

选项1：

<div class="coach-group group1">
            items...    
    </div>

    <div class="coach-group group2">
            items...
    </div>

选项2：

var first = $(".coach-group")[0];
var second = $(".coach-group")[1];