Jquery：存在する場合は要素Aを選択するための慣用方法、そうでない場合は要素B？

Question

私はJQueryでGreaseMonkeyスクリプトを書いています。これ

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

時にはそれがPタグ（またはいくつか）で物事を表示するのに対し、同じテーブル構造内の、：：
時々私は、このように、TDに表示情報を変更するサイト

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

今は<td>に対して<p>を選択するには2つの異なるセレクタを使用していますが、Pタグが存在する場合はそれを選択し、そうでない場合は1つのJqueryセレクタでTDを選択すると便利ですか？私が追加したいものはどちらの場合も同じです。単一のjQueryで

（私は関係なく、TDに追加する場合は、私のほかの変更の場所はPタグの存在/不在に基づいて、私は配置の一貫性のために行くよ。）

Answer 1

をはい、あなたはjQueryのを拡張することにより、これを行うことができます。あなたのGMのファイルの先頭付近にこれを入れて

：

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'); 

のみ最初psubstituteIfPresent()リターンのこのバージョンは：

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

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

を次にあなたが目的の要素を取得することができますタグ（存在する場合）。

Answer 2

ない可能性一つだけ選択操作で良い方法がこれです

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

$elem.append(...); 

Answer 3

：

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

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

これはを設定するステートメントが、あなたはこのような何かを行うことができます10から最後のp要素がある場合はそれに、それ以外の場合はtd要素になります。ページに複数のtd要素がある場合、これは予期しない結果になるので、より正確なセレクタを$('td')より使用する必要があります。

自己実行機能の理由は、余分な変数でスコープを汚染しないようにするためです。

Answer 4

私はこのために.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/