EdwardMaiden EdwardMaiden - 3 months ago 9
jQuery Question

jquery .find() not finding class

I have a part of my html code that goes like this:

<div id="photo-list-container" class="row">
<div class="col-xs-4 col-md-3">
<div class="photo-gallery-holder mar-2x" data-toggle="modal" data-target=".bs-example-modal-lg" data-id="{{ $photo->id }}" data-photo-filename="{{ $photo->id }}" data-tags="{{ htmlspecialchars(json_encode($photo->tags)) }}">
<img class="img-responsive" src="{{ $photo->thumb_url }}" alt="{{ $photo->title }}" />
</div>
</div>
</div>


and the I have tried to do with jquery:

$('#photo-list-container').find('.photo-gallery-holder').each(function() {
...
});

OR

$('#photo-list-container .photo-gallery-holder').each(function() {


And it always returns not found. why is that? The div that im searching for is nested in the photo-list-container just fine?

Please help. Thanks.

Answer

$('#photo-list-container').find('#photo-list-container') will look inside #photo-list-container for #photo-list-container. And there will be nothing to find.

Beside this, a id should be always unique. So there is no need for find or each in any case.

If you want to find all .photo-gallery-holder inside of the parent #photo-list-container you can use find. But I would prever to use a direct selector.

$('#photo-list-container').find('.photo-gallery-holder').each(function() {
    // ...
});

// or better
$('#photo-list-container .photo-gallery-holder').each(function() {
    // ...
});
Comments