jquery - 下面代码中的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>是动态生成的，当用户单击按钮时，我需要隐藏该<p> "** Some child Text ** " and make the Textarea visible特定 Div 并复制

部分到 Textarea

我试过点击按钮

$(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");