2012-05-29 30 views
0

我有一個簡單的HTML模板,在整個文檔中多次使用。它本質上是以下幾個div元素環繞幾個p元素和另一個div元素與button類。對於可視化的目的,在這裏有一個例子:jQuery中的選擇器和條件問題

<div class="content">  
    <p>First paragraph</p> 
    <p>Second paragraph</p> 

    <div><a class="button" href="http://www.apple.com/ipad/">Change me jQuery!</a></div> 
</div> 

<div class="content">  
    <p>First paragraph</p> 
    <p>Second paragraph</p> 

    <div><a class="button" href="http://www.apple.com/iphone/">Change me jQuery!</a></div> 
</div> 

現在,誰還會使用這個模板來發佈網站上的內容的用戶並不一定會使用這個錨標記完全相同的網址,但我究竟哪些認識他們可以使用。那麼,我想用我的代碼做的是以下幾點:

  1. 一旦內容已經發表,錨標記獲得一個網址 地址,我要檢查該地址,看看是否有一個特定的 在它的話。如果找到該單詞,則將錨文本更改爲我選擇的內容。
  2. 再次執行同樣的操作,但這次檢查url字符串中的另一個單詞。

下面是我寫的東西:

$('.content').each(function() { 
    var $this = $(this), 
     $findP = $this.find('p'); 

    if ($findP.length > 2) { 
     // Run some code 
    } else if (($findP.length <= 2) && ($('a[href*="ipad"]'))) { 
     $this.find('a.button').text('Visit iPad site'); 
    } else if (($findP.length <= 2) && ($('a[href*="iphone"]'))) { 
     $this.find('a.button').text('Visit iPhone site'); 
    } 
});​ 

問題:

  • 兩個錨標記文本變化,我已經寫在文本字符串第一個else if裏面的.text() jQuery方法。在我的例子中,第一個錨標籤應該採用文本「訪問iPad站點」,而第二個應該是「訪問iPhone站點」。下面是這個例子的工作小提琴:http://jsfiddle.net/vj4xZ/1/

我猜問題是在這裏,一旦第一個元素被發現,所有的錨標籤被分配有什麼在.text()方法和代碼停在那裏沒有尋找第二個什麼,如果聲明。如果是這種情況,或者手頭的問題是其他問題,那我怎麼才能讓它正常工作?任何幫助,將不勝感激。感謝您的時間!

回答

3

http://jsfiddle.net/zerkms/vj4xZ/2/

你需要改變你的條件是:

} else if (($findP.length <= 2) && ($this.find('a[href*="ipad"]').length)) { 

$('a[href*="ipad"]') - 意味着 - 如果在HREF ipad錨文檔某處

我已更改 - 僅限於通過當前元素搜索錨點$this.find()

您也可以使用$('a[href*="ipad"]', $this)相反,它會做同樣的工作

+0

你好@zerkms howz它bruv,你可以請參閱下面就我的回答足夠的什麼OP問需求「+1我想「事前同樣的事情」乾杯! –

+0

我發佈了這個問題後,我想到了你突出顯示的問題,我很高興你已經解決了這個問題。非常感謝!我也嘗試了你提到的第二個選項,但我不能很好地工作。 – Treadstone

+0

@Treadstone:看到第二個作品:http://jsfiddle.net/zerkms/vj4xZ/3/ – zerkms

1

你好做一個可愛的不同演示在這裏:http://jsfiddle.net/bKJfq/15/

前面的演示中使用這一選擇之一:http://api.jquery.com/category/selectors/

http://api.jquery.com/attribute-contains-selector/

一旦選擇符匹配,它會將文本更改爲所需的文本。

這很可能不那麼冗長;請讓我知道,如果我錯過了什麼。

希望這有助於B-)

代碼

$('a[href*="ipad"]').text("Visit iPad site"); 
    $('a[href*="iphone"]').text("Visit iPhone site"); 
+0

是的,你有這個權利,而且確實沒有冗長的編碼。謝謝! – Treadstone

+0

@Treadstone很多布魯夫,歡呼聲B-) –