使用属性条件Jquery选择div答案

【问题标题】：Selecting divs using attribute conditions Jquery使用属性条件Jquery选择div
【发布时间】：2014-12-10 17:09:33
【问题描述】：

.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"。第三个条件是这个属性必须在属性id="second"的div中。

我想用 jQuery 来做这件事。谁能帮我解决这个问题。

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

您可以使用以下代码：

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

.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;
}

<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">

【讨论】：

当. 符号存在时，为什么要把它包装在[class='sameClass'] 中？
你的编辑让我的评论看起来很愚蠢。 +1 相同的答案。
这也有效.. 谢谢。不知道 [] 做事方式。
是的，你可以看看Attribute Equals Selector和w3 selectors

【解决方案2】：

对于您列出的所有条件都有 CSS 选择器选项，并且 jQuery 接受 CSS 选择器来选择元素（就其价值而言，本机 JavaScript 的最新 ECMA 规范也是如此）。

你会像这样做你给定的场景：

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

然后你可以在上面附加一个图像标签，或者以任何你喜欢的方式改变它。

【讨论】：

太棒了@Josh 我是额外的工作所以删除了我的答案，因为这个答案是正确的

【解决方案3】：

选择器可以是这样的

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

.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;
}

<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">

【讨论】：