Question

我正在尝试向链接添加一个类。但我似乎没有工作。我尝试了所有可能的方法，并在谷歌已经很长一段时间了。无论如何我可以访问这个标签吗？

但我纠正了我的问题，抱歉。我想使用列表的第一个孩子，例如产品 - 盒子盒 - 最小 - 有多个。

$('div.listing > div.box--content.is--rounded > div.product--info > a').addClass('test');

<div class="product--box box--minimal" data-page-index="" data-ordernumber="XXXX">
    <div class="box--content is--rounded">
        <div class="product--info">
            <a href="XXXXX" title="XXXXX" class="product--image">
                <span class="image--element">
                    <span class="image--media">
                        <img srcset="XXXXX.jpg, XXXXXX2x.jpg 2x" alt="KXXXX" title="XXX">
                    </span>
                </span>
            </a>
            <div class="product--rating-container"></div>
            <span>XXX</span>
            <a href="hXXXXXXX" class="product--title" title="XXXX">
                XXXXXX
            </a>
            <div class="product--price-info">
                <div class="product--price-outer">
                    <div class="product--price">
                        <span class="price--default is--nowrap">XXXXXX</span>
                        <div style="display:none;">ab</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

问题是由于您使用了子选择器（>），并且.box--content.is--rounded不是div.listing的直接子项。试试这个：

$('div.listing > div.product--box.box--minimal > div.box--content.is--rounded > div.product--info > a').addClass('test');

或者，由于两个a元素都位于同一个容器中并且将被该选择器捕获，因此您可以将其简化为：

$('div.listing a').addClass('test');

我想使用商家信息的第一个孩子，例如product--box box--minimal - 有多个。

在这种情况下，您可以使用:first选择器：

$('div.listing > div.product--box.box--minimal:first > div.box--content.is--rounded > div.product--info > a').addClass('test');

// or, more simply:

$('div.listing div.product--box.box--minimal:first a').addClass('test');

Answer 2

div.box--content.is--rounded

这会尝试匹配作为类框的成员的div元素 - content.is - rounded ，这是一个div的子类列表的成员。

......但那并不存在。

在您的HTML div.listing中，的盛大子项。

您可能应该在至少一些当前使用子组合子（>）的地方使用后代组合子（{{1}}）。

Answer 3

您可以根据您的要求使用以下任何一种

// children（）方法返回所选元素的所有直接子元素。

$("div.listing").children("a").addClass('test')

// find（）方法返回所选元素的后代元素，一直到最后一个后代。

$("div.listing").find("a").addClass('test')

Answer 4

抱歉，我误解了您的问题，相应的选择器将是：

$('body > div > div > div > div > a.product--image')

如何获得嵌套的jQuery Selector

4 个答案: