Check whether a div has a child with a certain attribute with jQuery

Question

I'm trying to find the syntax to determine whether a div has a child div containing the data-role attribute set to header. I've tried these things with no luck:

$('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");
    }
});

Answer 1

In this example you have a trailing ; after !=0;

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

Example on jsfiddle.

Answer 2

Try:

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

Reference: http://api.jquery.com/has/