Need help creating unique ID's using a Loop - jQuery

Question

Super new to Jquery.

I'm trying to use jquery to create unique id's for each of my "section" tags by creating a loop. For some reason, this code below is not working, and I'm super confused, so please let me know if you have any ideas what I'm doing wrong.
Also, I'm trying to get my h2 tag inside of my li tag and then get my li tag inside of my ul tag. Any help there would be appreciated as well. All of this information is supposed to be added after my h1 tag. Thank you

$(document).ready(function() {
    var h2 = $("h2");
    $(h2).each(function(index) {
        for (var index = 0; index < 4; index++) {
            $(h2).attr("id", "section" + index);

            $(h2).attr("href", "#");
        }
    });

    var ul = $("<ul></ul>").find("ul");
    var list = $("<li></li>").find("li");

    $(".content h1").append(h2);

});

HTML ADDITION

<body>
<div class="concha">
 <h1>The love of my life and how we met </h1>

  <h3>The following is information on the Best thing that's ever      happened to me</h3>
  <h2>We met at the Park</h2>
   <p>filler text</p>
   <p>filler text</p>

   <h2>We went to the movies</h2>
    <p>filler text</p>
   <p>filler text</p>
  <h2>We had ice cream together</h2>
      <p>filler text</p>
       <p>filler text</p>
  <h2>The end</h2>
      <p>filler text</p>
     <p>filler text</p>

yeah, but I'm trying to get it to be section0,section1, section2, section3 or at least some type of unique id — Trying to Learn Javascript
– Trying to Learn Javascript, Commented Aug 27, 2016 at 0:24
Allen beat me to the punch with the answer. You were looping through each h2 tag, and for each one assigning it section0. Then re-assigning it to section1, section2, and section3. So all of them ended up with section3 as the final result. See his answer for how to correct it. — Matt Coats
– Matt Coats, Commented Aug 27, 2016 at 0:27
Dont worry Matt, you can answer the other part of the question. how do you get the h2 tag inside of my li tag and then get my li tag inside of my ul tag. Any help there would be appreciated as well. All of this information is supposed to be added after my h1 tag. — Trying to Learn Javascript
– Trying to Learn Javascript, Commented Aug 27, 2016 at 0:32

Allen Butler · Accepted Answer · 2016-08-27 17:10:51Z

4

You are looping through your h2 elements twice. Also, you are writing over all of your h2 elements in your loop. You will need to use this in your loop to call the current element:

$(document).ready(function() {
    var h2 = $("h2");
    var i = 0; // define variable i as your "index"
    $(h2).each(function(index) {
        i++; // Increase i by 1 each time you loop through your h2 elements
        $(this).attr("id", "section" + i); // Use $(this) to pull out the current element

        $(this).attr("href", "#"); // Again, use $(this)
    });

});

edited Aug 27, 2016 at 17:10

answered Aug 27, 2016 at 0:26

Allen Butler

3123 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user13880264 · Accepted Answer · 2020-07-08 22:17:55Z

Here is a great solution I found:

Here is my GetPasswordFromDB function (I'm using Mongo):

window.GetPasswordFromDB = function(ele)
    {
      var $row = $(ele).closest("tr");

      // collects each field's content for that row.
      user_name = $row.find("td:nth-child(1)").text();
      target = $row.find("td:nth-child(2)").text();
      system_type = $row.find("td:nth-child(3)").text();
      
      window.GetIDFromDB(ele, user_name, target, system_type);
      alert(ele.id);
      
      $.ajax(
      {
        type: 'POST',
        url: '/api/passwords/getPassword',
        dataType: "text",
        contentType: 'application/json',
        async: true,
        data: JSON.stringify({
          user_name: user_name,
          target: target,
          system_type: system_type
        }),
        success: function(data)
        {
          console.log("Retrieved Password Successfully.");
          window.ShowPassword(ele, data);
        },
        error: function(jqXHR, textStatus, errorThrown) 
        { 
          alert("Deletion Failed");
        }
      });
    }

To assign a unique id, I grab an objectID from the database, then assign the passed in element's id to it once retrieved:

window.GetIDFromDB = function(ele, ser_name, target, system_type)
      {
        $.ajax(
        {
          type: 'POST',
          url: '/api/passwords/getID',
          dataType: "text",
          contentType: 'application/json',
          async: true,
          data: JSON.stringify({
            user_name: user_name,
            target: target,
            system_type: system_type
          }),
          success: function(data)
          {
            console.log("Retrieved _ID Successfully.");
            var dataSub = data.substring(1, data.length-1);
            ele.id = dataSub;
          },
          error: function(jqXHR, textStatus, errorThrown) 
          { 
            alert("ID Retrieval Failed");
          }
        });
      }

I know this is a little different than what you were asking for, but if this helps anyone searching up this issue, feel free to thumbs up!

Collectives™ on Stack Overflow

Need help creating unique ID's using a Loop - jQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related