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的子项。

如果您不知道

，如何解决此问题

Divs是这样的：

<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感到困惑。

如何处理

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

具有nth-of类型的类系统

1 个答案:

如果您不知道

Sooo ......问题是什么？

如何处理