3


0

jquery:要素Aが存在する場合は要素Aを選択し、そうでない場合は要素Bを選択する慣用的な方法?

JQueryでGreaseMonkeyスクリプトを書いています。 +修正したいサイトがTDに情報を表示する場合があります:

Something interesting here.
whereas sometimes it displays things in a P tag (or several) within the
same table structure, thus:

同じ興味深いことに関する他のテキスト。 そして、おそらくもっと多くのものも。

...

Right now I'm doing two different selectors to select the ``

vs. the ``

, but I'm wondering if there's a nice way to select only the P tag if
it's present and the TD otherwise in a single Jquery selector, since
what I want to append is identical in both cases.

(If I just append to the TD regardless, the location of my addition
changes based on the presence/absence of the P tag, so I'm going for
placement consistency.)

4 Answer


1


単一のjQueryステートメントでは不可能ですが、次のようなことができます。

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

$elem.append(...);


1


これにはhttp://api.jquery.com/map/ [.map](またはhttp://api.jquery.com/each/ [` .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/


1


はい、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`タグのみを返します。


0


セレクター操作が1つだけの便利な方法は次のとおりです。

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') `よりも正確なセレクターを使用する必要があります。

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