为什么 :first-child 不工作？答案

【问题标题】：Why is :first-child not working?为什么 :first-child 不工作？
【发布时间】：2014-12-22 16:46:33
【问题描述】：

为什么这部分 jQuery 不能正常工作？

$(function() {

  if ($('#slide-01').is(":first-child")) {
    $('input:radio[id=target-slide-01]').prop('checked', true);
  } else {
    $('input:radio[id=target-slide-01]').prop('checked', false);
  }

  if ($('#slide-02').is(":first-child")) {
    $('input:radio[id=target-slide-02]').prop('checked', true);
  } else {
    $('input:radio[id=target-slide-02]').prop('checked', false);
  }

  if ($('#slide-03').is(":first-child")) {
    $('input:radio[id=target-slide-03]').prop('checked', true);
  } else {
    $('input:radio[id=target-slide-03]').prop('checked', false);
  }

  if ($('#slide-04').is(":first-child")) {
    $('input:radio[id=target-slide-04]').prop('checked', true);
  } else {
    $('input:radio[id=target-slide-04]').prop('checked', false);
  }

});

实现 jQuery 的链接位于jsFiddle。

当我检查 HTML 和 CSS 中的元素时，每张幻灯片最终都有 ':first-child'（随着幻灯片旋转），但我的猜测是 jQuery 没有识别旋转或者我的 jQuery 在某个地方关闭。

我也尝试过使用 :first 代替 :first-child，但这并没有什么不同。

【问题讨论】：

我不知道 jQuery，但是如果您要从有四张幻灯片的标记开始，那么从逻辑上讲，第三张幻灯片永远不会是第一个孩子，不是吗？
一旦 DOM 准备就绪，您只需调用该函数，但再也不会......那么第一个孩子总是 slide-01 。每次更改幻灯片时都需要调用该函数。
@Danko：您应该将其添加为答案:)
@Danko 我将如何调用该函数，每 6 秒在“最后一张”幻灯片之后插入“第一张”幻灯片？我是否需要使用 .change() 或类似的东西？我对 jQuery 很陌生，所以我提前道歉。
你可以给这个函数一个名字，然后在你的 intervall 函数中调用它......但是看看你的代码，我建议你告诉我们，你真正想要实现什么...... .因为看起来，你做的事情比需要的更复杂......

标签： jquery html css radio-button css-selectors

【解决方案1】：

单选按钮的函数只在页面加载时被调用一次，因为它是一个匿名的自调用函数。如果你给一个名字

function updateRadioButtons() {

    if ($('#slide-01').is(":first-child")) {
      $('input:radio[id=target-slide-01]').prop('checked', true);
    } else {
      $('input:radio[id=target-slide-01]').prop('checked', false);
    }

    if ($('#slide-02').is(":first-child")) {
      $('input:radio[id=target-slide-02]').prop('checked', true);
    } else {
      $('input:radio[id=target-slide-02]').prop('checked', false);
    }

    if ($('#slide-03').is(":first-child")) {
      $('input:radio[id=target-slide-03]').prop('checked', true);
    } else {
      $('input:radio[id=target-slide-03]').prop('checked', false);
    }

    if ($('#slide-04').is(":first-child")) {
      $('input:radio[id=target-slide-04]').prop('checked', true);
    } else {
      $('input:radio[id=target-slide-04]').prop('checked', false);
    }

  }

您可以在幻灯片更改时调用它

function moveLeft() {
    $('#myslider ul').animate({
        left: +containerWidth
    }, 600, function () {
        $('#myslider ul > li:last-child').insertBefore('#myslider ul > li:first-child');
        $(this).css('left', '');
        updateRadioButtons();
    });

}

function moveRight() {
    $('#myslider ul').animate({
        left: -containerWidth
    }, 600, function () {
      $('#myslider ul > li:first-child').insertAfter('#myslider ul > li:last-child');
      $(this).css('left', '');
        updateRadioButtons();
    });

}

以及页面加载

$(function() {

  // Key animation.

    updateRadioButtons();

  var myTimer = setInterval(function () {
    moveRight();
  }, 5000);

【讨论】：