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？

回答

相关问题