Jquery循环与条件

时间:2017-12-27 16:48:24

标签: jquery loops

我是jquery的新手,我不知道如何使用条件进行循环。我希望得到所有具有相同id的div(是的,我知道id应该是唯一的)并用红色边框着色。它似乎没有进行循环,因为只有第一个“#column3”被着色。我希望当#column3存在时,我们添加类焦点。

<div id="div2">
  <div id="column1">1
    <div class="price">400</div>
    <span>hello</span>
    <span>undefined</span>
  </div>
  <div id="column2">hello
  </div>
  <div id="column3">3
    <div class="price">600</div>
    <span>hello</span>
    <span>undefined</span>
  </div>
</div>
<div id="div2">
  <div id="column1">1
    <div class="price">400</div>
    <span>hello</span>
    <span>undefined</span>
  </div>
  <div id="column2">hello
  </div>
</div>

<div id="div2">
  <div id="column1">1
    <div class="price">400</div>
    <span>hello</span>
    <span>undefined</span>
  </div>
  <div id="column2">hello
  </div>
  <div id="column3">3
    <div class="price">600</div>
    <span>hello</span>
    <span>undefined</span>
  </div>
</div>

我试过这个:

 $("#div2 #column3").each(function (index) {
        if ($("#div2 #column3").length) {
            $("#column3").addClass("focus");
        }
    });

这是一个小提琴: https://jsfiddle.net/qm89a1cf/2/

2 个答案:

答案 0 :(得分:2)

jQuery .each参数是一个接受多个参数的函数。如果声明第二个,则可以访问该元素。然后给予该元素&#34;焦点&#34;类。

&#13;
&#13;
        $("#div2 #column3").each(function (index, element) {
        element.classList.add("focus");
    });
    
&#13;
.focus {
border: 3px solid red;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "div2">

<div id="column1">1
    <div class="price">400</div>
    <span>hello</span>
    <span>undefined</span>
</div>
<div id="column2">hello
</div>
<div id="column3">3
    <div class="price">600</div>
    <span>hello</span>
    <span>undefined</span>
</div>

</div>
<div id = "div2">
<div id="column1">1
    <div class="price">400</div>
    <span>hello</span>
    <span>undefined</span>
</div>
<div id="column2">hello
</div>
</div>

<div id = "div2">
<div id="column1">1
    <div class="price">400</div>
    <span>hello</span>
    <span>undefined</span>
</div>
<div id="column2">hello
</div>
<div id="column3">3
    <div class="price">600</div>
    <span>hello</span>
    <span>undefined</span>
</div>
</div>
&#13;
&#13;
&#13;

$("#div2 #column3").each(function (index, element) {
    element.classList.add("focus");
});

答案 1 :(得分:0)

在每个中你将获得两个参数,第一个是索引,第二个元素是它自己。

你可以在你的小提琴手中添加这个代码,它会起作用。

$("#div2 #column3").each(function (index,key) {
        if ($("#div2 #column3").length) 
         {
            $(key).addClass("focus"); //key is elemnt
         }
});