How can i grap the div closest to a input field

Question

How can i grap the div closest to multiple input field with the same name that has a certain value.

Here is my HTML:

        <div id="template" class="file-row">

            <input id="id_base64_data" name="base64_data" type="hidden">
            <input id="id_base64_name" name="base64_name" type="hidden">
            <input id="id_base64_content_type" name="base64_content_type" type="hidden">

            <!-- This is used as the file preview template -->
            <div>
                <span class="preview"><img class="thumb-image" data-dz-thumbnail /></span>
            </div>
            <div>
                <p class="name" data-dz-name></p>
                <strong class="error text-danger" data-dz-errormessage></strong>
            </div>
            <div>
                <p class="size" data-dz-size></p>
                <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
                    <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
                </div>
            </div>
            <div>
                <button class="btn btn-primary start">
                    <i class="glyphicon glyphicon-upload"></i>
                    <span>Start</span>
                </button>
                <a class="btn btn-primary crop btn-cropper-modal" data-toggle="modal" data-target=".cropper-modal">
                    Crop
                </a>
                <button data-dz-remove class="btn btn-warning cancel">
                    <i class="glyphicon glyphicon-ban-circle"></i>
                    <span>Cancel</span>
                </button>
                <button data-dz-remove class="btn btn-danger delete">
                    <i class="glyphicon glyphicon-trash"></i>
                    <span>Delete</span>
                </button>
            </div>
        </div>
    </div>

Javascript:

$('input[name=base64_name]').map(function(){

    if(this.value == base64_name) {
        console.log('x')
        $(this).closest(".thumb-image").attr('src', url + image);
    }

});

Im getting to see x inside my console but it is not updating my image. However when i change:

$(this).closest(".thumb-image").attr('src', url + image);

to:

$(".thumb-image").attr('src', url + image);

It is working but then it changes all images with that div name.

Im using Dropzone plugin so i cant really do much with the div names.

Any help would be appreciated!

cheers

Answer 1

closest travels up the tree to look at itself and its ancestors. The element you are looking for is a child of a sibling.

$(this).closest(".file-row").find(".thumb-image")