使用JQuery在第N列中获取元素。

时间:2017-08-28 11:06:05

标签: javascript jquery html css3

我有以下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获取第一列的所有元素。这可能吗?

5 个答案:

答案 0 :(得分:1)

要获取第一个li的{​​{1}},您可以执行以下操作:

ul

更具体地说,将选择器放在$('ul:first-child').find('li');

div

答案 1 :(得分:0)

使用spring.jpa.generate-ddl=false spring.jpa.hibernate.ddl-auto=none classpath:/schema.sql

eq

请注意nth-child为“0索引”且$div.find('ul:eq(0) li') $div.find('ul:nth-child(1) li') 为“1索引”。

JQuery也有快捷方式eqnth-child

答案 2 :(得分:0)

使用:nth-child()选择器

AveTime = 1.0e+03 * [0.0020, 0.0291, 0.1279, 0.3061, 2.0599];
STDtime = [0.0519, 0.0117, 0.0166, 0.0071, 0.0165];
errorbar([10,25,50,75,100], AveTime, STDtime);

将选择第一个$( "ul:nth-child(1) li:nth-child(2)" )

的第二个li

答案 3 :(得分:0)

您可以通过以下方式获取所有第一个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>

答案 4 :(得分:0)

    <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/