Question

我有这样的结构

<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">imalimalomrk@gmail.com</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">imalimalomrk@gmail.com</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>

和JS：

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

我想在父级中使用类.name来定位span，但没有发生任何事情???

Answer 1

使用closest从当前元素开始，然后逐步进入DOM树。

使用siblings将您的元素姐妹和兄弟（具有相同父级的其他DOM元素）作为目标：

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

注意：我不确定您是否以正确的方式使用on()方法... on()方法应附加到DOM加载后添加的对象的父元素，像这样：

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

其中parent是您正在侦听的实际元素的父级，如果要在mali_oglasi中添加a，div可能是父级{{1}} }

Answer 2

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

Answer 3

从您的结构看来.izmeni是.name

的兄弟

看看jQuery兄弟http://api.jquery.com/siblings/

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

父级中的jQuery目标元素

3 个答案: