Jquery：選擇元素A（如果存在）的慣用方法，否則元素B？

我正在用JQuery寫一個GreaseMonkey腳本。
有時候網站我想修改顯示的信息，在TD，即：相同的表結構中Jquery：選擇元素A（如果存在）的慣用方法，否則元素B？

<center><table><tr><td> 
Something interesting here.</td></tr>....</table></center>

，而有時候它顯示的東西在P標籤（或幾個），即：

<center><table><tr><td> 
<p>Other text about the same interesting thing. 
<p>and maybe some more stuff too.</td></tr>...</table></center>

現在我正在做兩個不同的選擇器來選擇<p>與<td>，但我想知道是否有一個很好的方式來選擇只有P標記，如果它存在和TD，否則在單個Jquery選擇器，因爲在兩種情況下，我想要追加的是相同的。

（如果我只是追加到TD不管，我除了改變基於存在/不存在p標籤的，位置所以我打算放置的一致性。）

來源

2010-11-18 Hellion

你發佈的內容不是有效的標記，你能舉一個完整的例子嗎？ – 2010-11-18 00:15:53

'td'元素是否只包含'p'元素或者沒有元素？ – 2010-11-18 00:20:09

@Nick Craver：它可能不是有效的，但它可能正是頁面上的內容。儘管沒有封閉的「p」標籤，但意圖已經足夠清晰。 – 2010-11-18 02:25:24

是的，您可以通過擴展jQuery的做到這一點。

把這個靠近你的GM文件的頂部：

$.fn.substituteIfPresent = function (tagName) 
{ 
    return this.map (function() 
    { 
     var childArray = $(this).children (tagName); 

     if (childArray.length) 
      return childArray[0]; 
     else 
      return this; 
    }); 
}

然後你就可以得到所需的元素：

X = $("center > table > tbody > tr > td").substituteIfPresent ('p'); 

//-- Note that X is a standard jQuery object, the following works: 
X.css ('border', '1px solid green');

此版本僅substituteIfPresent()返回第一個p標籤，如果存在。

來源

2010-11-18 04:32:39

儘管所有提出的解決方案基本上都使用了與'if'（'p'）。''相同的東西，但這使得它對我來說看起來最像JQuery。 :-) – Hellion 2010-11-18 17:18:43

在單一的jQuery不可能語句，但你可以做這樣的事情：

var $elem = $('p').length > 0 ? $('p') : $('table'); 

$elem.append(...);

來源

2010-11-18 00:17:03

var $ elem = $（'p'）。length？ $（'p'）：$（'table'）; – mkoryak 2010-11-18 00:29:24

只有一個選擇操作的好方法是這樣的：

var $el = (function(){ 
    var $td = $('td'), // you probably want a more precise selector here 
     $p = $td.find('p:last'); 

    return $p.length ? $p : $td; 
})();

這臺$el到最後的p元素（如果存在），否則返回td元素。請注意，如果您的網頁上有多個td元素，則會出現意想不到的結果，因此您應該使用比$('td')更精確的選擇器。

自執行功能的原因是避免用額外的變量污染你的範圍。

來源

2010-11-18 00:24:56 lonesomeday

我會用這個.map（或.each）：

$("center > table > tbody > tr > td").map(function() { 
    if($(this).find("p").length) { 
     $(this).find("p").css("border", "1px solid red"); 
    } else { 
     $(this).css("border", "1px solid green"); 
    } 
});

演示：http://jsfiddle.net/tBWhH/3/

來源

2010-11-18 00:45:37 karim79

既然你沒有返回一個值，那麼使用'.each（）'可能會更有意義。：o） – user113716 2010-11-18 00:49:09

@patrick - 好點，但我認爲效果是一樣的任何方式。我最初是在回收收藏品 - 但後來我迷惑了一下。 – karim79 2010-11-18 00:50:38

或者使用返回值，因爲OP似乎需要一個或另一個。 http://jsfiddle.net/tBWhH/4/ – user113716 2010-11-18 00:52:29

Jquery：選擇元素A（如果存在）的慣用方法，否則元素B？

回答

相關問題