Getting data from a html structure using jQuery

Question

I have a html structure that looks like the following:

  <div>
    <div questionName="${data.Name}" class="item">
            <div class="left"><input type="checkbox" class="include-checkbox"/></div>
            <div class="center">{data.Name}</div>
            <div class="right"><input class="comment" placeholder="Comment (optional)"/>
    </div>
   ...
</div>

With multiple "items" (divs with class="item"). These are generated. Using jQuery, I need to go through those divs, and if the checkbox for that item is checked, add the value from the center div and input value from the right div as a key-value pair to an object (or a JSON string). So my resulting object should look like this:

{
 "an item" : "some comment the user typed in",
 "another item": "some other comment",
 "yet another item" : ""
}

the comment is optional, and if the user doesn't fill anything in it should just contain empty string.

I am able to get all the items, because they have the same class, and run a foreach on them:

function submitItems() {
    let items = {};
    $('.item').each(function() {
        ?   
    });
}

But how do I then access the elements within the item? For example I want to check the status of the checkbox, but when I do $('.include-checkbox') it will give me all of them, not just the one that's inside my element. Also the function within the .each() construct, seems to have its own scope so the items object is not visible.

I have control over how the generated html looks, so I can add classes, ids or other attributes if need be.

"But how do I then access the elements within the item": jQuery has .children() method — Andris
– Andris, Commented Dec 5, 2019 at 14:31
In the .each() callback the "item" <div> elements will be referred to by this, so you can use $(this).find(".center") for example. — Pointy
– Pointy, Commented Dec 5, 2019 at 14:33
@Pointy in my opinion find is too heavy, if you need direct children. Else it is good. — Andris
– Andris, Commented Dec 5, 2019 at 14:34
@Andris It's going to be implemented by a .querySelectorAll() in most cases, so it'll be perfectly fine. I don't know where people get browser performance ideas from but modern browsers on computers less than 10 years old are extremely fast. — Pointy
– Pointy, Commented Dec 5, 2019 at 14:37

Pranav C Balan · Accepted Answer · 2019-12-05 14:36:39Z

3

You can use find() method in jQuery.

function submitItems() {
    let items = {};
    $('.item').each(function() {
       // check checkbox is checked 
       if($(this).find('.left :checkbox')[0].checked)
          // if checked then get text and input value and set the property
          items[$(this).find('.center').text().trim()] = $(this).find('.right input').val();
    });
}

answered Dec 5, 2019 at 14:36

Pranav C Balan

115k25 gold badges172 silver badges195 bronze badges

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

Comments

Akshita · Accepted Answer · 2019-12-05 14:55:09Z

0

function submitItems() {
    var items = {};
    $('.item').each(function (i, e) {

        var name = $("div", e).slice(1).text();
        var comment = $(".comment", $("div", e).slice(2)).first().val();
        var item = { name: comment };
        items[name] = comment;

    });
    var jsonstring=JSON.stringify(items);
    //do something
}

answered Dec 5, 2019 at 14:55

Akshita

8778 silver badges15 bronze badges

Collectives™ on Stack Overflow

Getting data from a html structure using 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