jquery - 获得第 n 个 child

Question

我一直在尝试通过 jquery 获取 div 的第 n 个子元素，因此我可以在同一屏幕上显示不同的内容，有点像制表符，但选择器不起作用。我有以下代码要处理。

这是标签的代码:

$("li, .tablink").click(function() {

  var $this = $("li, .tablink")

  if ($this.is(':nth-child(1)')) {
    alert("1");
  } else {
    alert("2");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabsContent">
  <ul>
    <li class="tabLink active">tab1</li>
    <li class="tabLink">tab2</li>
  </ul>
</div>

<div class="content1">
  first content of the page
</div>
<div class="content2">
  second content of the page
</div>
<div class="content3">
  third content of the page
</div>

我想要的只是有一个 jquery 说“每当我点击第一个选项卡时，我将显示该页面的第一个内容等等”

Ps: 我不能只用 CSS 来做，因为这是一个大元素，而且我必须使用相同的 HTML 文件，该文件包含元素每个页面中的选项卡 - 当然，每个页面都有它的自己的选项卡和内容集。

Answer 1

var $this = $("li, .tablink") 不正确。您应该只使用 this 传递给 jQuery 对象，如下所示:$(this)。

$("li, .tablink").click(function(){
        if ($(this).is(':nth-child(1)')) {
            alert("1");
        } else {
            alert("2");
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabsContent">
  <ul>
    <li class="tabLink active">tab1</li>
    <li class="tabLink">tab2</li>
  </ul>
</div>

    <div class="content1">
      first content of the page
    </div>
    <div class="content2">
      second content of the page
    </div>
<div class="content3">
      third content of the page
    </div>

但是如果我明白你想做什么，你最好只获取索引:

$("li, .tablink").click(function(){
        alert($(this).index() + 1);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabsContent">
  <ul>
    <li class="tabLink active">tab1</li>
    <li class="tabLink">tab2</li>
  </ul>
</div>

    <div class="content1">
      first content of the page
    </div>
    <div class="content2">
      second content of the page
    </div>
<div class="content3">
      third content of the page
    </div>