用jQuery检查一个div是不是有一个具有特定属性的孩子

Posted 2023-03-05

【中文标题】用jQuery检查一个div是不是有一个具有特定属性的孩子

【英文标题】：Check whether a div has a child with a certain attribute with jQuery用jQuery检查一个div是否有一个具有特定属性的孩子

【发布时间】：2011-07-01 09:16:45

【问题描述】：

我正在尝试查找语法以确定 div 是否具有包含 data-role 属性设置为 header 的子 div。我已经尝试过这些事情但没有运气：

$('div[data-role*="page"]').each(function(i) 
    if($(this).children('div').attr('data-role')=='header';) 
        alert("has header");
    
);

$('div[data-role*="page"]').each(function(i) 
    if($(this).children('div[data-role*="header"]').length!=0;) 
        alert("has header");
    
);

【问题讨论】：

如其他地方所述，在答案中，; 语句/检查中不需要分号 ;。如果某些东西不起作用，有时值得检查JS Lint。

【参考方案1】：

在本例中，!=0; 后面有一个尾随 ;

$('div[data-role*="page"]').each(function(i) 
    if ($(this).children('div[data-role="header"]').length != 0) 
        alert("has header");
    
);

jsfiddle 上的示例。

【参考方案2】：

这将选择那些作为子元素（数据角色属性设置为标题）的 div，它们是 div 的子元素。

$('div > div[data-role=header]')

【参考方案3】：

如果我没看错，那么以下应该可以工作：

$('div[data-role=page]:has(div[data-role])').css('border','1px solid #ccc');

选择包含具有“data-role”属性的子 div 的任何 div。

JS Fiddle.

虽然您似乎想使用if 来触发alert()，但这似乎 没有必要，因为上面将用作选择器。如果该选择器没有匹配任何元素，那么在我演示的用例中，不会影响任何元素。另一方面，如果一个元素被选中，或者多个元素被选中，那么这些元素就会被选中。

【讨论】：

你也可以像这样使用它：var myDiv = $('div[data-role=page]'); myDiv.has('div[data-role])').css('border','1px solid #ccc');

【参考方案4】：

试试：

if ($('div[data-role*="page"]').has("div[data-role=header]").size() > 0)
    alert("Has header");

参考：http://api.jquery.com/has/