javascript - 如何将 "this"与 eq 或 x-child 组合

Question

我需要定位父级 foo 的第二个子级。我该怎么做？

$("#one").click(function() {
  // How to get "me" if I do not know the classname?
  // I need to target that second div (I know that it's second).
  var q = $(this).eq(1).attr('class');
  console.log(q); // undefined

  // Aim?
  // I need that element or classname
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="one" class="foo">
  <div>one</div>
  <div class="me"></div>
</div>

Answer 1

您需要先获取 child ，然后应用 eq()方法。

var q = $(this).children().eq(1).attr('class');

$("#one").click(function() {

  var q = $(this).children().eq(1).attr('class');
  console.log(q); 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="one" class="foo">
1
 <div></div>
 <div class="me"></div>
</div>

---

或者使用 :nth-child选择器作为 children() 方法的参数。

var q = $(this).children(':nth-child(2)').attr('class');

$("#one").click(function() {

  var q = $(this).children(':nth-child(2)').attr('class');
  console.log(q); 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="one" class="foo">
1
 <div></div>
 <div class="me"></div>
</div>