jQuery target element within parent

Question

I have structure like this

<div id="mali_oglasi">
    <p class="mali_oglas">
        <span class="name">Predaja7</span>
        <span class="body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec urna eros, viverra nec porta vitae, luctus at ipsum. Pellentesque porta imperdiet purus, at pellentesque nisl lacinia et. Nam id justo do</span>
        <span class="contact_author">Saša</span>
        <span class="date_created">2012-03-13 14:36:30</span>
        <span class="date_expires">2012-04-12 14:36:30</span>
        <span class="email">[email protected]</span>

        <span>Pirot</span>

        <span>Auto i Moto</span>
                                                                                                   <a class="obrisi" id="16">Obrisi</a>
        <a class="izmeni" id="16">Izmeni</a>
    </p>
    <p class="mali_oglas">
        <span class="name">Predaja6</span>

        <span class="body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec urna eros, viverra nec porta vitae, luctus at ipsum. Pellentesque porta imperdiet purus, at pellentesque nisl lacinia et. Nam id justo do</span>
        <span class="contact_author">Saša</span>
        <span class="date_created">2012-03-13 14:36:19</span>
        <span class="date_expires">2012-04-12 14:36:19</span>
        <span class="email">[email protected]</span>
        <span>Pirot</span>

        <span>Auto i Moto</span>
                                                                                                   <a class="obrisi" id="15">Obrisi</a>
        <a class="izmeni" id="15">Izmeni</a>
    </p>.....           
</div>

and JS:

$('.izmeni').on('click', function() {
    $(this).closest('.name').replaceWith('<input />');
});

I want to target span with class .name in the parent but nothing is happening???

id attributes should not start with numbers.

jbabey
– jbabey

2012-03-14 13:08:27 +00:00
Commented Mar 14, 2012 at 13:08 — jbabey
– jbabey, Commented Mar 14, 2012 at 13:08

Manse · Accepted Answer · 2012-03-14 13:11:03Z

6

You use closest to start beginning at the current element and progressing up through the DOM tree.

Using siblings targets your elements sisters and brother (other DOM elements with the same parent):

$('.izmeni').on('click', function() {
    $(this).siblings('.name').replaceWith('<input />');
});

Note: im not sure your using the on() method in the correct manner ... the on() method should be a attached to a parent element of objects that are added after the DOM has loaded, like this :

$(parent).on('click', '.izmeni', function() {
    $(this).siblings('.name').replaceWith('<input />');
});

where parent is a parent of the actual element you are listening on, in your case mali_oglasi could be the parent if the a are to be added within that div

edited Mar 14, 2012 at 13:11

answered Mar 14, 2012 at 13:04

Manse

38.1k11 gold badges88 silver badges112 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Robin Maben · Accepted Answer · 2012-03-14 13:05:25Z

0

$('.izmeni').on('click', function(e) {
    $(e.target).closest('.SomeParent').find('.elementToReplace').replaceWith('<input />');
});

answered Mar 14, 2012 at 13:05

Robin Maben

23.3k16 gold badges70 silver badges99 bronze badges

1 Comment

Robin Maben Over a year ago

Notice the e and closest-find combination.

Sam Giles · Accepted Answer · 2012-03-14 13:05:56Z

0

It looks like from your structure .izmeni is a sibling of .name

Take a look at jQuery siblings http://api.jquery.com/siblings/

$('.izmeni').on('click', function() {
    $(this).siblings('.name').replaceWith('<input />');
});

answered Mar 14, 2012 at 13:05

Sam Giles

6507 silver badges16 bronze badges

Collectives™ on Stack Overflow

jQuery target element within parent

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related