具有第 n 个类型的类系统

Question

我对 nth-of-type 函数实际上应该如何工作感到困惑。我不知道我是否编码错误，因为我无法让它正常运行。这是我的结构-（已更新）

<div id="wrapper">

        <div id="slider">

            <div class="slide"> <a href="link> <img src="imglink" alt="Slide1">

                <div class="slide-block">
                    <h4>Header</h4>

                    <p>Subtext</p>
                </div> 
              </a>   
            </div>

            <div class="slide"> <a href="link"> <img src="imglink" alt="Slide2">
                <div class="slide-block">
                    <h4>Header</h4>
                    <p>Subext</p>
                </div>
              </a>  
            </div>

            <div class="slide"> <a href="link"> <img src="imglink" alt="Slide3">
                <div class="slide-block">
                    <h4>Header</h4>
                    <p>subtext</p>
                </div>
              </a>  
            </div>

        </div>  

    </div>

我正在尝试选择第 n(2) 个“幻灯片”类，但它总是会选择第一个“幻灯片”类。

        $('#thumbnails').click(function() {
                $('#slider').trigger('slideTo', $( "class.slider slide:nth-of-type(2))") );

        });
    }); 

在 Firefox 中，我只能选择第一类类型，而不是第二类。我在这里做错了什么？

Answer 1

首先，伙计，您并没有终止您的 HTML 标签：

 <div id="slider">
 <div class="slide">
     <a href="link"><img src="imglink">
 <div class="slide-block">
 <h4>Text</h4>
 <p>Subtext</p>

你知道这有什么问题吗？浏览器无法识别.slider 的孩子，因为我 无法识别.slider 的孩子。

如果你不知道如何解决这个问题

Div 是这样的：

<div class='slider'><!-- content inside --></div>

Sooo...有什么问题？

不正确的 HTML 格式可以很好地隐藏 HTML 结构中的缺陷。格式正确，看看你的代码：

<div id="wrapper">
  <div id="slider">
    <div class="slide">
      <a href="link"><img src="imglink">
        <div class="slide-block">
          <h4>Text</h4>
          <p>Subtext</p>
        </div>
      </a>
    </div>
    <div id="slider">
      <div class="slide">
        <a href="link"><img src="imglink">
          <div class="slide-block">
            <h4>Text</h4>
            <p>Subtext</p>
          </div>
        </a>
      </div>
      <div id="slider">
        <div class="slide">
          <a href="link"><img src="imglink">
            <div class="slide-block">
              <h4>Text</h4>
              <p>Subtext</p>
            </div>
          </a>
        </div>

您是否看到包装器和第一部分从未正确终止？浏览器可能对如何解释您的 HTML 感到非常困惑。

如何处理

这是我们为您分配下一个任务的地方。好的 Stack Overflow 问题意味着你已经做了体面的工作来尝试自己解决问题。研究如何正确格式化此代码，然后它应该可以解决您的问题。