使用 JQuery 获取第 N 列中的元素。答案

【问题标题】：Getting elements in the Nth column using JQuery.使用 JQuery 获取第 N 列中的元素。
【发布时间】：2017-08-29 14:44:35
【问题描述】：

我有以下 html 代码

<div style="column-count: 3;">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>


<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>

它将 ul 分成三列。现在我想只使用 JQuery 获取第一列的所有元素。这可能吗？？

【问题讨论】：

我认为JS没有能力告诉文档的布局。不过有一个解决方案，它要求您检索单个 <li> 元素的 offset 属性：具有最低值的元素位于第一列（同样，此策略不适用于 rtl 读取方向）。
您可以尝试从 div 中分别提取 ul 标签到新的 div 标签中。
能给个代码示例吗？
Stuart 举了一个例子。
....
$('.myUls ul:first-child').find('li');
@Terry 无论是 RTL 还是 LTR，“first”列由与第一个列表的第一项具有相同偏移量的项组成，因此如果您只比较此值，您的解决方案应该在这两种情况下都有效给所有其他人，而不是保持最低

标签： javascript jquery html css

【解决方案1】：

要获得第一个ul 的li，您可以这样做：

$('ul:first-child').find('li');

更具体地说，在您的 div 上放置一个选择器：

<div class="myUls">
    <ul>....
</div>

$('.myUls ul:first-child').find('li');

【讨论】：

如果项目比其他项目高/小（它是可视的），那么第一列（显示）可能不是第一个列表

【解决方案2】：

使用eq 或nth-child：

$div.find('ul:eq(0) li')
$div.find('ul:nth-child(1) li')

请注意，eq 是“0 索引”，nth-child 是“1 索引”。

JQuery 也有快捷方式first-child 和last-child。

【讨论】：

【解决方案3】：

使用:nth-child() 选择器

$( "ul:nth-child(1) li:nth-child(2)" )

将选择第一个ul中的第二个li

【讨论】：

【解决方案4】：

    <div>
      <ul>
        <li>John</li>
        <li>Karl</li>
        <li>Brandon</li>
      </ul>
    </div>
    <div>
      <ul>
        <li>Sam</li>
      </ul>
    </div>
    <div>
      <ul>
        <li>Glen</li>
        <li>Tane</li>
        <li>Ralph</li>
        <li>David</li>
      </ul>
    </div>

    <script>
    $( "ul li:nth-child(2)" ).append( "<span> - 2nd!</span>" );
    </script>

    https://api.jquery.com/nth-child-selector/

【讨论】：

【解决方案5】：

你可以通过这个获得所有第一个li值：

$("div ul").each(function(t){ alert( $(this).find("li:first").text() ); } );

同样你也可以使用nth-child..

Fiddle

$("div ul").each(function()
	{ 
  	$("#sa").text( $("#sa").text() + " > " +
    	 $(this).find("li:first").text();
         //$(this).find("li:nth-child(1)").text();
       );
	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div style="column-count: 3;">
<ul>
<li>1.1</li>
<li>1.2</li>
<li>1.3</li>
<li>1.4</li>
</ul>


<ul>
<li>2.1</li>
<li>2.2</li>
<li>2.3</li>
<li>2.4</li>
</ul>

<ul>
<li>3.1</li>
<li>3.2</li>
<li>3.3</li>
<li>3.4</li>
</ul>
</div>

<span id="sa"></span>

【讨论】：