jquery - 如何找到 Ajax 的子项添加内容然后执行功能

Question

我有 html

<ul id="main">
   <li id="A100">
             <ul class="slides">
                     <li><img1></li>
                     <li><img2></li>
             </ul>
   </li> 
   <li id="A99">
             <ul class="slides">
                     <li><img1></li>
                     <li><img2></li>
             </ul>
   </li>
</ul>

然后我通过ajax添加以下内容。

<li id="A98">
             <ul class="slides">
                     <li><img1></li>
                     <li><img2></li>
             </ul>
   </li> 
   <li id="A97">
             <ul class="slides">
                     <li><img1></li>
                     <li><img2></li>
             </ul>
   </li>

所以看起来像这样

 <ul id="main">
       <li id="A100">
                 <ul class="slides">
                         <li><img1></li>
                         <li><img2></li>
                 </ul>
       </li> 
       <li id="A99">
                 <ul class="slides">
                         <li><img1></li>
                         <li><img2></li>
                 </ul>
       </li>
       <li id="A98">
                 <ul class="slides">
                         <li><img1></li>
                         <li><img2></li>
                 </ul>
       </li> 
       <li id="A97">
                 <ul class="slides">
                         <li><img1></li>
                         <li><img2></li>
                 </ul>
       </li>
    </ul>

正确的语法是什么

$("#main").children(with id after ids ending with 99).nextAll.each(function(){
     $(this).something({
       //do stuff.

      });
});

我必须使用 children() 而不是 find()，因为我只想在 1 级做“某事”<li>.

编辑：我会“做点什么”。阿贾克斯成功。（如果这有助于更好地理解这个问题）

EDIT2：感谢所有建议。我找到了这个。甚至在我做 ajax 之前，我就在现有的 html 上“做某事”。（即 A100、A99）

如果我使用

$("#main li").each(function() 
    { 

        });

它按预期工作，但如果我使用

 $("#main").children("li").each(function() 
        { 

            });

它不工作。这里有什么区别？如果我知道这一点，我想我可以解决手头的问题。

可能这样的事情会起作用吗？我试过这个但没有用，但可能是我做错了吗？

$("#main li[id$='A99']").nextAll().each(function() 
            { 

                });

score 2 · Accepted Answer

你可以这样做。但是如果您使用 AJAX 添加它们并且此函数在其中document.ready()，则不会在新元素上调用它。添加它们后，您必须调用它。

$("#main").children("li[id$='99']").nextAll().each(function(){
    $(this).html("test"); // do something
});

http://jsfiddle.net/Cj7Cs/

score 1 · Accepted Answer

使用此代码：

jsFiddle

for ( var i=98; i>40 /* or some thing else */;i--){
    $("li#A"+i).css("background","red"); 
}

score 1 · Accepted Answer

如果您不完全确定id数字会在数字上减少，您可以主动测试id( A00)的格式并且数字小于100：

$('#main > li').filter(function () {
    var id = this.id;
    return (/^A\d{2}$/).test(id) && parseInt(id.replace(/[^0-9]/g, ''), 10) < 99;
}).each(function(){
    // do whatever, for example:
    this.classList.add('selected');
});

JS 小提琴演示。

参考：

score 1 · Accepted Answer

这将起到作用，假设 id 将始终按降序排列。

$("#main").find('#A99').nextAll().each(function(){
    //$(this)... will yield A98, A97
});

jquery - 如何找到 Ajax 的子项添加内容然后执行功能

4 回答 4

Related

Reference