Question

我有一个多列div，需要获取被单击元素的列索引。

$('.child').click(function() {
    let a = $(this).column().index();
    let b = $(this).column().children().length;
    let c = $(this).index(/*relative to a column*/);
});

.parent{
column-count:3;
}

.child{
cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='parent'>
<div class='child'>lorem</div>
<div class='child'>lorem</div>
<div class='child'>lorem</div>
<div class='child'>lorem</div>
<div class='child'>lorem</div>
<div class='child'>lorem</div>
<div class='child'>lorem</div>
<div class='child'>lorem</div>
</div>

这可能吗？

Answer 1

如果您知道总是有三列，则可以执行以下操作：

$('.child').click(function() {
  let columnIndex = Math.floor($(this).index() / 3);
  console.log(columnIndex)
});

Answer 2

示例1

Math.ceil(b.children().length / b.css('column-count'))：将子项数除以列数（按照class="parent"的{{1}} CSS值。然后使用column-count将数字四舍五入

Math.ceil()和d = 0由以下e = false循环使用。在循环内部，while () {}在每个循环中递增，而d减少a。这一直持续到c小于0为止。然后循环结束，a打印该值（到日志）。

console.log()

$('.child').click(function() {
  let a = $(this).index();
  let b = $(this).parent();
  let c = Math.ceil(b.children().length / b.css('column-count'));

  let d = 0;
  let e = false;

  while (!e) {
    d += 1;
    a = a - c;
    if (a < 0) {
      e = true;
    };
  };

  console.log(d)
});

.parent {
  column-count: 3;
}

.child {
  cursor: pointer;
}

示例2

下面使用的基本概念与我的第一个示例相同，但是它依赖于元素<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h2>7</h2> <div class='parent'> <div class='child'>lorem</div> <div class='child'>lorem</div> <div class='child'>lorem</div> <div class='child'>lorem</div> <div class='child'>lorem</div> <div class='child'>lorem</div> <div class='child'>lorem</div> </div> <h2>8</h2> <div class='parent'> <div class='child'>lorem</div> <div class='child'>lorem</div> <div class='child'>lorem</div> <div class='child'>lorem</div> <div class='child'>lorem</div> <div class='child'>lorem</div> <div class='child'>lorem</div> <div class='child'>lorem</div> </div> <h2>9</h2> <div class='parent'> <div class='child'>lorem</div> <div class='child'>lorem</div> <div class='child'>lorem</div> <div class='child'>lorem</div> <div class='child'>lorem</div> <div class='child'>lorem</div> <div class='child'>lorem</div> <div class='child'>lorem</div> <div class='child'>lorem</div> </div>和.width()。允许子元素具有不同的高度。

.offset()

$('.child').click(function() {
  let thisOffset = Math.floor($(this).offset().left - $(this).parent().offset().left); # subtract parent's offset from clicked element, to "zero" it
  let thisColumn = 0;
  let loopStop = false

  while (!loopStop) {
    thisColumn++;
    thisOffset -= $(this).width();

    if (thisOffset < 0) {
      loopStop = true;
    }
  }

  console.log(thisColumn);
});

.parent {
  column-count: 3;
}

.child {
  cursor: pointer;
}

Answer 3

通过一些预处理，可以从Dim X As Long, LastRow As Long, LastCol As Long LastCol = Cells(1, Columns.Count).End(xlToLeft).Column Application.ScreenUpdating = False For X = LastCol To 1 Step -1 LastRow = Cells(Rows.Count, X).End(xlUp).Row If LastRow = 1 And Not IsEmpty(Cells(1, X)) Then Columns(X).Delete End If Next Application.ScreenUpdating = True小部件的边界客户端rect中收集相关信息：我们知道它们以矩形网格排列，因此收集了{{1 }}边界客户端rect组件的更改足以识别列之间的包装。

在响应式设置中，可能需要在视口大小调整和样式更改（可能会在添加/删除内容时影响字形大小和布局尺寸）上调用预处理。

这是独立代码：

.child

演示

请参见this JSFiddle。

专业版

即使设置了css属性x / <!DOCTYPE html> <html> <head> <style> .parent{ column-count:3; } .child{ cursor:pointer; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> let map_idx2col = [] , map_idx2rel = [] , map_col2len = [] ; $(document).ready( () => { let ccur = 0 , idxrel = 0 , xoff = 0 ; $(".parent > .child").each ( (idx, e) => { let bcr = e.getBoundingClientRect() ; if (bcr.x > xoff) { ccur++; map_col2len[ccur] = 0; idxrel = 0; xoff = bcr.x; } map_idx2col[idx] = ccur; map_idx2rel[idx] = idxrel; idxrel++; map_col2len[ccur]++; }); $('.child').click(function() { let abc = column(this) ; console.log(` column: ${abc.column} , column size: ${abc.size} , row: ${abc.row} `); // let a = column(this); // let b = $(this).column().children().length; // let c = $(this).index(relative to a column); }); }); // ready function column ( e ) { let idx = $(e).prevUntil(e, '.child').length ; return { column: map_idx2col[idx] , row: map_idx2col[idx] , size: map_col2len[map_idx2col[idx]] }; } // column </script> </head> <body onload="eh_onLoad()"> <div class='parent'> <div class='child'>lorem</div> <div class='child'>lorem</div> <div class='child'>lorem</div> <div class='child'>lorem</div> <div class='child'>lorem</div> <div class='child'>lorem</div> <div class='child'>lorem</div> <div class='child'>lorem</div> </div> </body> </html>，该解决方案也可以使用，该属性强制每列使用最少行数（当然，直到布局算法用完了要布局的数据）-在此设置下，仅根据orphans属性（假设高度平衡的列）以数学方式推断列位置的解决方案将失败！

骗局

如果这些属性的值在列中发生更改，则需要修改css属性来更改widows元素的水平位置。

如何在多列div中获取列索引

3 个答案:

示例1

示例2