Question

我想在点击时将数据附加到最近的李...我接下来试过，父母，最近，找不到。

这是我的jsfiddle ......

我的jquery：

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

不工作。我可以知道为什么以及如何解决这个问题？感谢

Answer 1

以下是关于如何定位最近的li的纯Javascript示例： http://jsfiddle.net/kT3Rb/54/

和片段：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

另一种方法是使用children和closest方法。

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

Answer 3

使用getSchema(value, schema){ if(schema == 'Currency'){ return value + "| currency: 'USD':true"; } else if(schema == 'Number'){ return value + '| number'; } }您只会遍历三个DOM，因为closest()是您按钮的父级的兄弟，您找不到任何内容。

您需要以下内容：

.test

那将是：

$(this).parent().next().find('.infoCatcher').append('<div class="moreInfo info">More Content..' + '</div>');实际按钮
$(this)直至李父母
.parent()定位您的标记上的下一个li。.test
.next()以及div infoCatcher 追加

如何在下一个<li>中附加数据

3 个答案:

FiddleDemo