用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。

标签： jquery jquery-selectors attributes

【解决方案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/

【讨论】：