Sélectionner la première image de la division courante en utilisant jQuery

Question

Je viens de poster une question similaire à ce sujet pour découvrir que ce n'était pas exactement ce dont j'avais besoin. Je m'en excuse.

Voici le code avec lequel je travaille :

jQuery(document).ready(function($) { 

  $('.upload_button').click(function() {

    targetfield = $(this).prev('.logo_url');
    tb_show('', 'media-upload.php?type=image&TB_iframe=true');

    window.send_to_editor = function(html) {
      imgurl = $('img',html).attr('src');
      jQuery(targetfield).val(imgurl);
      tb_remove();

      $('.upload_preview img').attr('src',imgurl); // THIS IS WHERE I'M HAVING PROBLEMS

      $('#submit_options_form').trigger('click');
    };

    return false;

  });
});

Je ne suis pas le meilleur avec jQuery et je suis encore novice dans certains domaines. J'ai besoin de faire apparaître l'url de la balise img dans la classe de prévisualisation, mais seulement sur celle qui reçoit l'url. Ce que j'ai maintenant va remplir chaque balise image qui a cette classe. Toute aide est la bienvenue.

J'ai besoin qu'il le remplisse comme le champ de saisie est rempli.

EDIT

Voici un exemple de HTML. J'utilise plusieurs de ces exemples sur une page.

<li class="slide">

            <input class="logo_url" name="theme_wptuts_options[logo]" value="src[]" />
                <input class="upload_button" type="button" class="button" value="<?php _e( 'Upload Logo' ); ?>" />

                <div class="upload_preview" style="min-height: 100px;">
                    <img style="max-width:100%;" src="src[]" />
                </div>

            <button class="remove_slide button-secondary">Remove This Slide</button>

</li>

Answer 1

Utilisez :eq(0), il choisira le premier élément, c'est à mon avis le meilleur moyen comparé à .first() .last() etc :)

$('.upload_preview img:eq(0)').attr('src',imgurl);

Answer 2

Imgurl* EDITION 11/05/2012 9:47pm ET *

C'est peut-être ça ! Je ne peux pas tester dans le fiddle car je ne peux pas exécuter la fonction window.send dans le fiddle.

Violon de travail révisé

JQuery

var whichLi;

jQuery(document).ready(function() {

    $('.upload_button').click(function() {

       whichLi= $(this).parent('li');

       targetfield = $(this).prev('.logo_url');
        tb_show('', 'media-upload.php?type=image&TB_iframe=true');

        window.send_to_editor = function(html) {

            imgurl = $('img', html).attr('src');
            jQuery(targetfield).val(imgurl);
            tb_remove();

            $(whichLi).find('img').attr('src', imgurl);
            $('#submit_options_form').trigger('click');
        };

        return false;

    });
});

Answer 3

Après de nombreux essais et erreurs, voici ce que j'ai obtenu et qui fonctionne comme je le voulais. J'apprécie l'aide et les réponses de chacun.

jQuery(document).ready(function($) { 
$('.upload_button').click(function() {
     targetfield = $(this).prev('.logo_url');
     imgpreview = $(this).parent().find('img');
     tb_show('', 'media-upload.php?type=image&TB_iframe=true');
window.send_to_editor = function(html) {
     imgurl = $('img',html).attr('src');
     jQuery(targetfield).val(imgurl);
     tb_remove();
     $(imgpreview).attr('src', imgurl);
     $('#submit_options_form').trigger('click');
};
return false;
});
});

Answer 4

:first le sélecteur fait le travail :

$('.upload_preview:first img').attr('src', imgurl);