Question

如何在JS / JQuery中使用second / third div而不在此元素上使用class或id？

<div class="parentcontainer">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

还有没有可能通过数字（顺序）找出子元素是什么？像：

  <div class="parentcontainer">
                <div class="hey"></div>
                <div class="hey"></div>
                <div class="hey"></div>
                <div class="hey"></div>
          </div>

$('.hey').click(function(){
// what element by number is that?
});

Answer 1

使用:eq()

var secondInnerDiv = $('div div:eq(1)');
var thirdInnerDiv = $('div div:eq(2)');

$('div div:eq(1), div div:eq(2)').css('background', 'green');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="parentcontainer">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

或 :lt()/gt()

var secondAndThirdInnerDiv = $('div div:gt(0):lt(2)');

$('div div:gt(0):lt(2)').css('background', 'green');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="parentcontainer">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

<强>更新

使用index()

$(this).index()

$('div div').click(function(){
  console.log($(this).index());
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="parentcontainer">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Answer 2

你可以解决这个问题：

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

Answer 3

这就是我用的例子：

div > div:first-child {
    background-color:yellow;
}

Here is a JSFiddle demo

请注意div > div选择所有直接div儿童。对于演示，我使用:first-child

突出显示了第一个孩子

Answer 4

以下是提供其中一种方法

的提示的代码

var allDivs = $(".parentcontainer > div");
var secondDiv = $(allDivs.get(1));
var thirdDiv = $(allDivs.get(2));

Answer 5

您可以使用slice()方法：

var secondAndThirdDiv = $("div div").slice(1,3);

您基本上指定了所需的元素范围（当然，0索引）。

Answer 6

http://jsfiddle.net/k4pm1fxw/

// return position
$('.parentcontainer').on('click', '.hey', function(){
    alert($(this).index()); 
});
// select nth with eq
$('.parentcontainer').find('.hey').eq(2).css('background', 'red');

如何在没有class / id的情况下获得div的明确孩子

6 个答案: