jQuery: Selektiere vorheriges Element vom Klick-Ereignis in Schleife

Question

Verzeih mir, wenn diese Frage schon einmal gestellt wurde, aber ich neu bei jQuery bin und Probleme habe, mein Problem zu beschreiben. Ich habe eine Schleife in einer PHP-Seite, die etwa wie folgt aussieht: „löscht Titel“

foreach ($blahs as $blah) { 
    echo '<p class="title">'.$blah->title.'</p>'; 
    echo '<input/>'; 
    echo '<input/>'; 
    echo '<div class="delete-button"><img /></div>'; 
} 

Was ich versuche, der Ersatz von .$blah->title. mit dem Satz zu tun ist in dem nächsten vorhergehenden <p> Element zu dem wird geklickt. Um dies zu tun Ich habe einige jQuery ganz oben auf der Seite wie folgt:

<script type="text/javascript"> 
    jQuery(document).ready(function() { 
     jQuery(".delete-button").click(function() { 
      jQuery(this).prev('.title').html("Delete this title?"); 
     }); 
    }); 
</script> 

Allerdings bedeutet dies nicht funktionieren. Wenn ich die .prev('.title') entferne, ersetzt es die HTML des Divs, also weiß ich, dass es auf einer bestimmten Ebene funktioniert, aber ich kann es nicht schaffen, es zu bekommen, um die HTML des vorhergehenden <p class="title"> zu ersetzen. Danke für Ihre Hilfe.

Answer 1

Sie können es einen Schritt weiter gehen, indem Sie alle Elemente in einem gemeinsamen übergeordneten Element umhüllen und einen einzelnen Handler an das übergeordnete Element anfügen Verwenden Sie .on() statt einen Handler pro Schaltfläche zuweisen. Es ist ein Leistungsvorteil, nur einen einzigen Handler zu haben, im Gegensatz zu X Anzahl der Handler für X Elemente in der Liste.

auch, die Struktur Ihrer Artikel zu sehen, lassen Sie uns sie wickeln. Es verhindert, dass alle Objekte Geschwister sind (wodurch ein Objekt eindeutig wird). Dann können wir einfach die Methode .sibling() verwenden, um den Titel relativ zur Schaltfläche zu finden.

auch, besser Listen verwenden, sie sind semantischer.

DEMO

<ul class="items"> 
    <li>  
     <p class="title">Blah title</p> 
     <input/><input/> 
     <div class="delete-button">Delete Button</div> 
    </li> 
    <li> 
     <p class="title">Blah title</p> 
     <input/><input/> 
     <div class="delete-button">Delete Button</div> 
    </li> 
    <li> 
     <p class="title">Blah title</p> 
     <input/><input/> 
     <div class="delete-button">Delete Button</div> 
    </li> 
</ul> 

$(function(){ 

    //add a single handler to the parent instead of per button 
    $('.items').on('click','.delete-button',function(){ 
     //the "this" in here is the delete button element 
     //since the button and .title are siblings, use the sibling method 
     $(this).siblings('.title').text('Delete this title?');  
    }); 
});​ 

Answer 2

Verwendung $(this).prev().prev().prev()

aber es ist zu 100% auf Ihre Struktur gebunden!

Answer 3

Wickeln Sie Ihre zugehörigen Elemente in ihren eigenen div, gemäß diesem Beispiel: http://jsfiddle.net/d6Vny/2/

Sie werden feststellen, dass es funktioniert, wenn Sie Ihre HTML ist:

<div>  
    <p class="title">Blah title</p> 
    <input/><input/> 
    <div class="delete-button">Delete Button</div> 
</div> 
<div> 
    <p class="title">Blah title</p> 
    <input/><input/> 
    <div class="delete-button">Delete Button</div> 
</div> 
<div> 
    <p class="title">Blah title</p> 
    <input/><input/> 
    <div class="delete-button">Delete Button</div> 
</div> 

Und Ihre jQuery ist:

jQuery(".delete-button").click(function() { 
    jQuery(this).siblings('.title').html("Delete this title?"); 
});​