Question 334669 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How can I get my Jquery code to iterate properly?

I’m trying to get the values that have been put in a row of table cells to be inputted into divs a CSS heights.

So for example (as you will see from my code below), the first table cell has a value of 50, so I want the first div to take that 50 value and turn it into a CSS height value.

My code does indeed do this, but despite using the ‘.each’ feature, no iteration seems to take place. All of my div heights are set at the first value, which is 50.

Can anyone please let me know what I need to change so that each div has the correct value set by the correct <td>

$(document).ready(function() {
  $("#out td").each(function() {
    var num = $("#out td").html();
    var iNum = parseInt(num);
    console.log(iNum);
    $("div").each(function() {
      $(this).css("height", iNum + "px");
    });
  });
});
table {
  border: 1px solid #000;
  border-collapse: collapse;
}

#g1 {
  background-color: blue;
  border: 1px solid #000;
}

#g2 {
  background-color: red;
  border: 1px solid #000;
}

#g3 {
  background-color: green;
  border: 1px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<table>
  <tr id="graph">
    <td>
      <div id="g1"></div>
    </td>
    <td>
      <div id="g2"></div>
    </td>
    <td>
      <div id="g3"></div>
    </td>
  </tr>
  <tr id="out">
    <td>50</td>
    <td>60</td>
    <td>70</td>
  </tr>
</table>
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks so much for your answers. It's very much appreciated.

    I've not done any JQuery for years, so I'm trying to remember it all!


  2. 0

    $("div") is a general selector which you used in the loop to set height. You need to focus on the desired div on each itteration by using index to get the index and eq to set the index.

    Same problem while getting the height, $("#out td").html() is not focused on the correct element. var num = $(this).html() is the correct way where $(this) is the current TD in the loop:

    $(document).ready(function() {
  $("#out td").each(function() {
    var num = $(this).html();
    var iNum = parseInt(num);
    var eq= $(this).index(); 
    console.log(iNum);
  
   $("#graph td").eq(eq).find("div").css("height", iNum + "px");
   
  });
})
    Login or Signup to reply.
  3. 0

    You need to get the cell values and assign to each DIV

    We also need to align the divs bottom – note the cells are relative and the divs absolute

    $(document).ready(function() {
  const $divs = $("#graph div");
  $("#out td").each(function(idx,ele) { 
    $divs.eq(idx).css("height", `${ele.textContent}px`);
  });
});
    table {
  border: 1px solid #000;
  border-collapse: collapse;
}

#g1 {
  background-color: blue;
  border: 1px solid #000;
}

#g2 {
  background-color: red;
  border: 1px solid #000;
}

#g3 {
  background-color: green;
  border: 1px solid #000;
}

#graph td {
  height: 100px;
  position: relative;
  /* Makes the cell a reference for the absolute positioning */
}

#graph td div {
  position: absolute;
  bottom: 0;
  width: 70%;
  
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<table>
  <tr id="graph">
    <td>
      <div id="g1"></div>
    </td>
    <td>
      <div id="g2"></div>
    </td>
    <td>
      <div id="g3"></div>
    </td>
  </tr>
  <tr id="out">
    <td>50</td>
    <td>60</td>
    <td>70</td>
  </tr>
</table>

    Assuming each out cell corresponds to the divs in the order they come we can also do this – for example if you need to do some calculation on the values

    $(document).ready(function() {
  // get the values - no need to convert to int since we concatenate to "px" anyway
  const heights = $("#out td")
    .map(function() { return this.textContent }) // use +this.textContent if you need an int
    .get();

  $("#graph div").each(function(i, ele) {
    $(ele).css("height", `${heights[i]}px`);
  })
});
    table {
  border: 1px solid #000;
  border-collapse: collapse;
}

#g1 {
  background-color: blue;
  border: 1px solid #000;
}

#g2 {
  background-color: red;
  border: 1px solid #000;
}

#g3 {
  background-color: green;
  border: 1px solid #000;
}

#graph td {
  height: 100px;
  position: relative;
  /* Makes the cell a reference for the absolute positioning */
}

#graph td div {
  position: absolute;
  bottom: 0;
  width: 70%;
  
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<table>
  <tr id="graph">
    <td>
      <div id="g1"></div>
    </td>
    <td>
      <div id="g2"></div>
    </td>
    <td>
      <div id="g3"></div>
    </td>
  </tr>
  <tr id="out">
    <td>50</td>
    <td>60</td>
    <td>70</td>
  </tr>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search