Jquery循环与条件

Question

我是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/

Answer 1

在每个你将得到两个参数首先是索引和第二个元素它是自己。

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

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

Answer 2

jQuery .each参数是一个接受多个参数的函数。如果声明第二个，则可以访问该元素。然后将该元素作为“焦点”类。

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

.focus {
border: 3px solid red;
}

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

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