使用JQuery检查父节中是否存在具有特定数据属性的子div

时间:2015-12-15 12:43:23

标签: jquery html

如何检查父母section是否有另一个孩子' div具有特定的数据属性?这是我要做的事情:



if ($("#parent").children().data("child-nr").contains("1") == true) {
    $("#parent").css('background-color', 'green');
}
else {
    $("#parent").css('background-color', 'red');
}

div {
  width: 50px;
  height: 50px;
  background-color: lightblue;
  float: left;
  margin: 5px;
  text-align: center;
  vertical-align: middle;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<section id="parent">
    <div data-child-nr="1"><p>N° 1</p></div>
    <div data-child-nr="2"><p>N° 2</p></div>
    <div data-child-nr="3"><p>N° 3</p></div>
</section>
&#13;
&#13;
&#13;

3 个答案:

答案 0 :(得分:7)

只需定位元素,然后通过检查集合length

来检查它是否存在

1完全匹配

if ( $('#parent div[data-child-nr="1"]').length ) { ...

包含1

if ( $('#parent div[data-child-nr*="1"]').length ) { ...

1

开头
if ( $('#parent div[data-child-nr^="1"]').length ) { ...

1

结束
if ( $('#parent div[data-child-nr$="1"]').length ) { ...

答案 1 :(得分:1)

您可以使用>选择器检查elment直接儿童并使用[data-attribute selector],而不是检查结果是否为&gt; 0喜欢:

代码:

if ($('#parent>div[data-child-nr="1"]').length > 0) {
    // div exists           --> yes
    alert('ok')
}
else {
    // div doesn't exists   --> no
    alert('nope')
}

演示:http://jsfiddle.net/xt80p2b0/

答案 2 :(得分:0)

试试这个:

$("#parent>div").each(function(){

    if ($(this).attr('data-child-nr') === "1") {
        // div exists           --> yes
        alert('ok');
    }
    else {
        // div doesn't exists   --> no
        alert('nope');
    }
});