使用属性条件Jquery选择div

Question

.sameClass{
  background-color:#3e6687;
  width:100px;
  height:100px;
  float:left;
  margin-right: 10px;
}

#first,#second{
  margin-bottom:10px;
  float:left;
}

#first{
  background-color:#8a94ae;
}

#second{
  background-color:#29375a;
}

<div id="first">
<div class="sameClass" data-category="fun"></div>
<div class="sameClass" data-category="boring"></div>
<div class="sameClass" data-category="okay"></div>
</div>

<div id="second">
<div class="sameClass" data-category="fun"></div>
<div class="sameClass" data-category="boring"></div>
<div class="sameClass" data-category="okay"></div>
</div>


<input type="button" value="Lets Do This">

假设我有上面的代码，并且我想在单击按钮时动态地将图像插入到其中一个div中。我想检查div是否具有属性class =“sameClass”和属性data-category =“fun”。第三个条件是该属性必须在div中，属性id =“second”。

我想用jQuery做这件事。任何人都可以帮助我。

Answer 1

您可以使用以下代码：

＆＃13;

＆＃13;

$(":button").on("click", function() {
  //according your requirements element with class .sameClass and 
  //data-category = fun that ancestor element has id second
  $("#second div.sameClass[data-category='fun']").append("<div>test</div>");
});

＆＃13;

.sameClass {
  background-color: #3e6687;
  width: 100px;
  height: 100px;
  float: left;
  margin-right: 10px;
}
#first,
#second {
  margin-bottom: 10px;
  float: left;
}
#first {
  background-color: #8a94ae;
}
#second {
  background-color: #29375a;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first">
  <div class="sameClass" data-category="fun"></div>
  <div class="sameClass" data-category="boring"></div>
  <div class="sameClass" data-category="okay"></div>
</div>
<div id="second">
  <div class="sameClass" data-category="fun"></div>
  <div class="sameClass" data-category="boring"></div>
  <div class="sameClass" data-category="okay"></div>
</div>
<input type="button" value="Lets Do This">

＆＃13;

＆＃13;

＆＃13;

Answer 2

对于您列出的所有条件都有CSS选择器选项，jQuery接受CSS选择器来选择元素（对于它的价值，原生JavaScript的最新ECMA规范也是如此）。

您可以按照以下方式执行以下任务：

$('div#second div.sameClass[data-category="fun"]') /* Your element */

然后，您可以将图像标记附加到该标记，或以其他任何方式更改它。

Answer 3

选择器可以是这样的

＆＃13;

＆＃13;

$('input[type=button]').on('click', function(){
     $('div#second').find('.sameClass[data-category="fun"]').append('<div>Test</div>');
});

＆＃13;

.sameClass {
  background-color: #3e6687;
  width: 100px;
  height: 100px;
  float: left;
  margin-right: 10px;
}
#first,
#second {
  margin-bottom: 10px;
  float: left;
}
#first {
  background-color: #8a94ae;
}
#second {
  background-color: #29375a;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="first">
    <div class="sameClass" data-category="fun"></div>
    <div class="sameClass" data-category="boring"></div>
    <div class="sameClass" data-category="okay"></div>
</div>

<div id="second">
    <div class="sameClass" data-category="fun"></div>
    <div class="sameClass" data-category="boring"></div>
    <div class="sameClass" data-category="okay"></div>
</div>
<input type="button" value="Lets Do This">

＆＃13;

＆＃13;

＆＃13;