0

I'm trying to set particular elements under a class with values retrieved via $.getJSON. The problem is nothing is being shown for the elements. Here is my code:

$.getJSON('/members/feed/get-friend-status', function(data) {
    $.each(data, function(i, item) {
        $('.w3-container w3-card-2 w3-white w3-round w3-margin').find('h4').html(data[i].username);
        $('.w3-container w3-card-2 w3-white w3-round w3-margin').find('p').html(data[i].status);
        $('.w3-container w3-card-2 w3-white w3-round w3-margin').find('img').attr('src', data[i].images);
    });
}).fail(function(response) {
    console.log(response);
});

and the html:

<div class="w3-container w3-card-2 w3-white w3-round w3-margin">
    <h4></h4>
    <br>

    <hr class="w3-clear">

    <p></p>

    <div class="w3-row-padding" style="margin: 0 -16px">
        <div class="w3-half">
            <img src="<?php echo $this->basePath(); ?>/images/lights.jpg" style="width: 100%" alt="Northern Lights" class="w3-margin-bottom">
        </div>
    </div>

    <button type="button" class="w3-btn w3-theme-d1 w3-margin-bottom">
        <i class="fa fa-thumbs-up"></i> Like
    </button>

    <button type="button" class="w3-btn w3-theme-d2 w3-margin-bottom">
        <i class="fa fa-comment"></i> Comment
    </button>
</div>

Am I using the right jQuery functionality to do this?

Any help would be appreciated

Thanks

user2101411
  • 1,204
  • 2
  • 14
  • 33
  • The selector is wrong, use this `.w3-container.w3-card-2.w3-white.w3-round.w3-margin`. If there are spaces in between that would search for child elements, but you also missed the dots '.' – knetsi Mar 11 '18 at 19:35
  • oh, its for every class? okay, I thought it was all one class. thanks – user2101411 Mar 11 '18 at 19:37
  • Actually i have found another SO answer which can help you to understand it better, https://stackoverflow.com/a/1041352/5064866 – knetsi Mar 11 '18 at 19:37
  • so no spaces between the dots? – user2101411 Mar 11 '18 at 19:44
  • Yeah, when you want to select an element with multiple classes you should have a dot for each class and no spaces in between. But you could also instead of using the ´find´ alter your selector for example to select the h4 ´$('.w3-container w3-card-2 w3-white w3-round w3-margin h4')´ you noticed that i used a space in between the classes of the parent element and the h4 element. So if you have a space that means you are looking for a child element, you could also instead of space use the ´>´ sign to select a direct child, look at the docs https://api.jquery.com/child-selector/ – knetsi Mar 11 '18 at 19:50

0 Answers0