How do I return an entire div inside of a div?

Question

I am looping through all the grocery_items and getting its attributes. But why is the grocery item label not returning the entire div inside i.e:

<div class="column-right feedcontainer" id="protein"></div> 
<div class="column-left feedcontainer" id="sodium"></div>?

Here is my code, HTML

 <div class="grocery_items" data-gs-height="4" data-gs-width="4" data-gs-x=
"10" data-gs-y="6">
    <div class="grocery_item_label">
        <div class="column-left feedcontainer" id="sodium"></div>
    </div>
</div>

<div class="grocery_items" data-gs-height="4" data-gs-width="4" data-gs-x=
"10" data-gs-y="6">
    <div class="grocery_item_label">
        <div class="column-right feedcontainer" id="protein"></div>
    </div>
</div>

Jquery

$(function(){ 
var items =[];
$('.grocery_items').each(function () {
    var $this = $(this);
    items.push({
        x: $this.attr('data-gs-x'),
        y: $this.attr('data-gs-y'),
        w: $this.attr('data-gs-width'),
        h: $this.attr('data-gs-height'),


        content: $('.grocery-item_label', $this).html()

    });
   });

     alert(JSON.stringify(items));
      });

Here is my fiddle: http://jsfiddle.net/xu0ck30h/4/.
Output is something like this:

[{"x":"0","y":"12","w":"4","h":"4","content":"  <div id=\”Protein\" class=\"column-center feedcontainer\"></div>\n"},{"x":"4","y":"12","w":"4","h":"4","content":"  <div id=\”Sodium\" class=\"column-left feedcontainer\"></div>\n"},

What is your intended output supposed to be? What do you expect? — Shotgun Ninja, Jul 01 '15 at 17:09
@ShotgunNinja The output should be like that on the last line. But I can't seem to get it working. I know my attr are right — John Len, Jul 01 '15 at 17:46
It's not working because you've misspelt your selector with a `-` instead of a `_`. It reads `.grocery-item_label` but should be `.grocery_item_label`. http://jsfiddle.net/s99x17nh/ works fine — Jan, Jul 01 '15 at 21:31

alex · Accepted Answer · 2015-07-01T21:25:51.213

0

You should be using $($this).find('.grocery_item_label').html() instead.

$(function () {
    var items = [];
    $('.grocery_items').each(function () {
        var $this = $(this);
        items.push({
            x: $this.attr('data-gs-x'),
            y: $this.attr('data-gs-y'),
            w: $this.attr('data-gs-width'),
            h: $this.attr('data-gs-height'),
            content: $($this).find('.grocery_item_label').html()
        });
    });
    console.log(JSON.stringify(items));
});

The selector $('.grocery-item_label', $this) is sort of unclear; you're basically telling jQuery "Select each element with the class .grocery-item_label, and this one too.".

$($this).find('.grocery_item_label').html() will select the .grocery-item_label which is being iterated over, and then try to find the child element with the class grocery_item_label. On a side note, if there are multiple children, using .first() will help you find the first child element.

Also, there's a typo in your code: $('.grocery-item_label') shouldn't return any results.

Here's a JSFiddle.

edited Jul 01 '15 at 21:25

answered Jul 01 '15 at 17:05

alex

6,818
9
52
103

What's the issue? I'm getting `[{"x":"10","y":"6","w":"4","h":"4","content":"\n
\n "}, "x":"10","y":"6","w":"4","h":"4","content":"\n
\n "}]` in the console. – alex Jul 01 '15 at 17:54
@JohnLen Maybe try using `$().html().trim()`? https://api.jquery.com/jQuery.trim/ – alex Jul 01 '15 at 20:25
Thanks for all your replies @alex but it's not a whitespace problem. – John Len Jul 01 '15 at 21:02
1

1. There's nothing wrong with op's selector, `$('.grocery-item_label', $this)` tells jquery to look for `.grocery-item_label` inside of `$this`. The only problem is the misspelling. 2. In your code `$($this)` is superfluous, it already is a jquery object. Just `$this` would work just fine. – Jan Jul 01 '15 at 21:36
@Jan +1, [fair enough](http://stackoverflow.com/questions/8092500/comma-separated-list-of-selectors). The OP's code is, I believe, functionally identical to my approach using `.find()`. But in my defense, the OP is using `var $this = $this`, which is superfluous. – alex Jul 02 '15 at 01:32
OP used `var $this = $(this);`, it's not really superfluous since storing the jquery object in a variable you only have to do the jquery conversion once. – Jan Jul 02 '15 at 08:50
1

@alex THANK YOU the trim idea did not work. However it gave me the idea to remove the extra tags around and it now works. You're my hero :) I have been stuck for a day on how to approach it. – John Len Jul 02 '15 at 16:58

How do I return an entire div inside of a div?

1 Answers1