Jquery pre vnorený element - jquery

Mám štruktúru DIV, ako je uvedené nižšie (pls skontrolovať obraz). Chcel som zmeniť obsah textového poľa, keď kliknem na relatívne tlačidlo pomocou Jquery.

Napríklad, ak kliknem na tlačidlo (1), obsah textového poľa (1) by sa mal zmeniť. Podobne, ak kliknem na tlačidlo (2), obsah textového poľa (2) by sa mal zmeniť.

Napísal som nasledujúci kód, ale funguje to pre tlačidlo (2), keď kliknem na tlačidlo (1), zmení sa obsah oboch textových polí.

     $(document).on("click", ".b", function(e) {
var a = $(this).closest(".a");
$(".c", a).val("sample text");
});

Môžem to vyriešiť rôznymi triedami pre rôzne tlačidlá / textové polia. Chcel som však mať rovnakú štruktúru triedy a problém vyriešiť.

odpovede:

Ak je vaša štruktúra DOM vždy rovnaká ako na obrázku, malo by to fungovať.

HTML:

<div class="a">
<input type="text" class="c">
<input type="button" value="Button" class="b">
<div class="a">
<input type="text" class="c">
<input type="button" value="Button" class="b">
</div>
</div>

jQuery:

$(".b").on("click", function () {
//Find parent .a
var $a = $(this).parent();

//Add in the text
$a.children(".c").val("sample text");
});

PRACOVNÝ PRÍKLAD

Funguje to tak, pretože prejdete hore k najbližšiemu ".a" prvok a potom vykoná nález, ktorý má rekurzívny charakter; Preto vyberie obe textové polia.

Namiesto toho len vyhľadajte súrodenecký prvok:

$(document).on("click", ".b", function(e) {
var $c = $(this).siblings(".c");
$c.val("sample text");
});