Jquery：选择元素 A（如果存在）的惯用方法，否则选择元素 B？

Question

我正在使用 JQuery 编写 GreaseMonkey 脚本。
有时我想要修改的站点在 TD 中显示信息，因此：

<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 Jquery 选择器，因为我想要附加的内容在两种情况下都是相同的。

（如果我只是附加到 TD，无论如何，我的添加位置会根据 P 标签的存在/不存在而变化，所以我要保持位置一致性。）

Answer 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 标记（如果存在）。

Answer 2

在单个 jQuery 语句中不可能，但你可以这样做：

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

$elem.append(...);

Answer 3

我会使用 .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/

Answer 4

仅使用一个选择器操作的一种好方法是：

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') 更精确的选择器。

自执行函数的原因是为了避免额外的变量污染你的作用域。