Jquery loop with condition

jquery loops

65 观看

2回复

15 作者的声誉

I'm new with jquery and I don't know how to do a loop with a condition. I want to get all the div with the same id (yeah I know id should be unique) and color the border in red. It seems that it's not doing the loop since only the first "#column3" is colored. I want that when #column3 exists, we add class focus.

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

And I tried this:

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

Here is a fiddle: https://jsfiddle.net/qm89a1cf/2/

作者: LovePoke 的来源 发布者: 2017 年 12 月 27 日

回应 2


2

3434 作者的声誉

jQuery .each parameter is a function that accepts several parameters. If you declare the second one, you can access the element. And then give that element the "focus" class.

        $("#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");
});
作者: Guillaume Georges 发布者: 2017 年 12 月 27 日

0

14 作者的声誉

决定

In for each you will get the two parameters first is index and second one element it's self.

You can add this code in your fiddler and it will works.

$("#div2 #column3").each(function (index,key) {
        if ($("#div2 #column3").length) 
         {
            $(key).addClass("focus"); //key is elemnt
         }
});
作者: Savaliya Bhavesh 发布者: 2017 年 12 月 27 日
32x32