JQuery從重複html結構中選擇3個鏈接中的2個

我試圖從重複的HTML結構中選擇3個現有的a元素中的2個，並且無法設計出高效的jquery選擇器。JQuery從重複html結構中選擇3個鏈接中的2個

這是標記。我試圖選擇Link 1，Link 2，但不是Link 3。請注意，整個HTML結構（div.container）可能會發生多次。如果是這樣，我需要鏈接1和鏈接2從所有container類。

注1：我無法修改標記。

注2：我更喜歡該溶液完全選擇器基於（並且避免呼叫.find()等，如本選擇器具有與此問題的範圍之外的另一個選擇器被組合

<div class="container"> 
    <h1> 
     <a href="http://www.google.ca">Link 1</a> 
    </h1> 
    <div> 
     <div class="left"> 
      <p> 
       <a href="http://www.google.ca">Link 2</a> 
      </p> 
     </div> 
     <div class="right"> 
      <a href="http://www.google.ca">Link 3</a> 
     </div> 
    </div> 
</div>

當單個container結構發生時，一個簡單的選擇是：

$(".container a:lt(2)");

然而，如果多個container結構存在，以上僅選擇第一個容器中的鏈接1和鏈接2。

以下適用於一個或多個container結構，但我不喜歡它。設置多個css路徑選擇器似乎效率不高。

$(".container h1 a, .container .left a");

在冗長的語言，我想「選擇container類內的所有a標籤未包含right類中。這是可能的嗎？或者是使用2條CSS路徑的最佳選擇上述選擇。

Test Fiddle.

來源

2012-05-29 KP.

嘗試像下面，

$(".container").find("a:lt(2)")

DEMO

有這個問題，然後將其與從這一問題的選擇相結合的範圍外部的單獨的選擇器。比方說$（'。myOtherSelector，.selectorFromThisQuestion'）;所以我寧願這個解決方案只是一個選擇器。我可以用$（'。container'）。find（'a：lt（2）'）。add（'。myOtherSelector'）來組合它們，但是你可以看到第一個選項更簡單。正如我所說，如果無法完成，我一定會使用您的解決方案/標記作爲答案。我只是感興趣是否可以使用直選器。

另外，作爲一個解決方法，你可以嘗試像下面，如果你想在1行..注意，這隻適用於提出的標記。 任何標記更改都會破壞代碼。

$(".container :nth-child(1) a").css('background-color','red');

DEMO

來源

2012-05-29 14:49:14

感謝。這是行得通的，但是我應該在我的問題中更加清楚，理想情況下，我正在尋找一個選擇器，而不需要調用.find（）或其他函數。用於查找這些鏈接的選擇器與我的項目中的另一個選擇器相結合，因此添加其他功能使其複雜化。我會保持積極的態度，儘管你的確如所問的那樣達到了標準。我已經更新了這個問題。 –

@KP。我不確定它是如何使它複雜化的。如果你提供更多的信息，我們可以試着找到另一種方式。 –

我在這個問題的範圍之外有一個單獨的選擇器，然後與此問題的選擇器組合。讓我們說'$（'。myOtherSelector，.selectorFromThisQuestion'）;'所以我更喜歡這個解決方案只是一個選擇器。我可以用$（'。container'）。find（'a：lt（2）'）。add（'。myOtherSelector'）'來組合它們，但是你可以看到第一個選項更簡單。正如我所說，如果無法完成，我一定會使用您的解決方案/標記作爲答案。我只是感興趣是否可以使用直選器。 –

使用:not選擇，如下圖所示：

$(".container a:not('.right a')")

來源

2012-05-29 15:47:51 Probocop

感謝您的回答。這很好。我已經upvoted，並希望我也可以將它標記爲Vega的替代選項。兩者都完全符合我的需求。 –

JQuery從重複html結構中選擇3個鏈接中的2個

回答

相關問題