jquery - 如何在下一个 中追加数据

Question

我想在点击时将数据附加到最近的李上...我尝试了下一个，父级，最近的，查找，但没有尝试。

这是我的 jsfiddle...

http://jsfiddle.net/kT3Rb/47/

我的jquery:

$(document).ready(function(){
   $(document).on('click', '.btnMoreInfo', function(){
       $(this).closest(".test").next('.infoCatcher').append('<div class="moreInfo info">More Content..' + '</div>');
   });
});

不工作。我可以知道为什么以及如何解决它吗？谢谢

Answer 1

以下是纯 Javascript 示例，说明如何定位最接近的 li: http://jsfiddle.net/kT3Rb/54/

代码片段:

var closestLi = document.body.firstElementChild.firstElementChild;
var content = document.createTextNode('Your content here');
closestLi.appendChild(content);

<ul>
    <li>
        <button class='btnMoreInfo'>More</button>    
    </li>
    <li class="test">
         <div class='infoCatcher'></div>
    </li>
   <li>
        <button class='btnMoreInfo'>More</button>    
    </li>
    <li class="test">
         <div class='infoCatcher'></div>
    </li>
       <li>
        <button class='btnMoreInfo'>More</button>    
    </li>
    <li class="test">
         <div class='infoCatcher'></div>
    </li>
       <li>
        <button class='btnMoreInfo'>More</button>    
    </li>
    <li class="test">
         <div class='infoCatcher'></div>
    </li>
</ul>