如何獲取嵌套的jQuery選擇器

我想添加一個類到鏈接。但我似乎沒有工作。我嘗試了所有可能的方式，並且在谷歌上已經很長時間了。無論如何我可以訪問這個標籤嗎？如何獲取嵌套的jQuery選擇器

但我糾正了我的問題，對不起。我想要使用列表的第一個孩子，例如產品 - 盒子 - 最小 - 有多個。

$('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>

來源

2016-06-07 Isengo

div.box - content.is - rounded不是div.listing的直接後代。用空格替換> – LDJ

@LDJ - 是的。問題是它不是它的孩子。 – Quentin

對不起，如果我沒有提到。但是還有一個盒子 - 內容是圓形的，我想選擇第一個盒子。 – Isengo

問題是因爲您使用子選擇器（>）的，那.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');

來源

2016-06-07 12:59:12

「直接子選擇器」 - 它被稱爲「子組合器」（以前稱爲「子選擇器」）。我不知道你從哪裏得到「直接」這個詞，選擇者不會區分「直接」和任何其他（「可能」）。 – Quentin

錯誤的術語由我糾正。 –

但我糾正了我的問題，對不起。我想要使用列表的第一個孩子，例如產品 - 盒子 - 最小 - 有多個。 – Isengo

div.listing > div.box--content.is--rounded

這種嘗試匹配一個div元素是類箱中的一員 - content.is - 四捨五入這是一個孩子是一個類列表成員的股利。

...但這並不存在。

在您的HTML div.box--content.is--rounded是盛大子div.listing。至少在當前使用子組合器（>）的某些地方，您應該使用子孫組合器（）。

來源

2016-06-07 12:59:42 Quentin

-3

對不起，我誤解你的問題，適當的選擇應該是：

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

來源

2016-06-07 13:06:33 Himanshu

1）這與任何事件無關，更不用說'click' 2）'live（）'在過去很久以前就被棄用了，而且你真的不應該再次使用它。 –

編輯了我的答案，謝謝@Rory – Himanshu

即使這樣，on（）在這裏並不重要。 –

您可以使用根據您的需要以下的任何

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

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

//這一發現（）方法返回的後代所選擇的元素的元素，直到最後後代的所有道路。

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

來源

2016-06-07 13:12:04

如何獲取嵌套的jQuery選擇器

回答

相關問題