下面代码中的Jquery HTML遍历

Question

<div class="main">
<button class="btnClick" type="button"> </button>
<button class="btnClick" type="button"> </button>
<div class="child">
<p> ** Some child Text ** </p>
<textarea id="edit" class="hidden"></textarea>  //class hidden == Display:none
</div>
</div>

<div class="main">
<button class="btnClick" type="button"> </button>
<button class="btnClick" type="button"> </button>
<div class="child">
<p> ** Some child Text ** </p>
<textarea id="edit" class="hidden"></textarea>  //class hidden == Display:none
</div>
</div>

我正在尝试使用上述代码实现编辑部分。上面的<div> 是动态生成的，当用户单击按钮时，我需要隐藏该特定 Div 的 <p> "** Some child Text ** " and make the Textarea visible 并复制

部分到文本区域

我试过点击按钮

$(this).closest('#edit').removeClass("hidden");

但它不起作用，并且每次使用其他代码时，无论我点击哪个按钮，都只有第一个 textarea 可见

我正在寻找的是在第一个按钮上单击特定的<div> textarea class hidden to be removed and copy the<p> text to Textarea on that particula <div>

最好的方法是什么。我可以添加任何新类并使代码通用。你的想法！！

Answer 1

您应该从 textarea 中删除 id 以避免有多个相同的 id。

这个函数可以满足你的需要。

$(document).on('click', '.btnClick', function(){
    //cache the child div block (everything you want is in here)
    child = $(this).next('.child');

    //hide the p tag
    child.find('p').hide();

    //this copies the p tag in
    child.find('textarea').val( child.find('p').html() ); 

    //this shows the textarea
    child.find('textarea').show();
});

这是一个 jsfiddle：http://jsfiddle.net/6wAUK/

Answer 2

试试

$(document).on('click', '.btnClick', function(){
    var div = $(this).next()
    div.find('p').hide();
    div.find('textarea').show();
})

Answer 3

试试

$(this).parent("div").find('#edit').removeClass("hidden");