web-dev-qa-db-ja.com

jQueryを使用して、divに特定の属性を持つ子があるかどうかを確認します

data-role属性がheaderに設定されている子divが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");
    }
});
13
vee

この例では、;の後に!=0;が付いています。

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

jsfiddle の例。

16
Mark Coleman

試してみてください:

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

参照:http://api.jquery.com/has/

6
Chris Laplante

私がこれを正しく読んでいるなら、以下はうまくいくはずです:

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

'data-role'の属性を持つ子divを含むdivを選択します。

JSフィドル

ifを利用してalert()をトリガーしたいようですが、上記はセレクターとして機能するため、このは不要のようです。そのセレクターによって一致する要素がない場合、私が示すユースケースでは、要素は影響を受けません。一方、要素が選択されている場合、または複数の要素が選択されている場合は、それらが選択されます。

これにより、divの子である子要素(data-role属性がヘッダーに設定されている)であるdivが選択されます。

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