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>.上做“某事”

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

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

如果我使用

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

        });

正常工作，但如果我使用

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

            });

无效。这有什么区别？如果我知道，我想我可以解决手头的问题。

这可能是这样的吗？我试过这个并没有用，但可能是我做错了？

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

                });

Answer 1

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

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

http://jsfiddle.net/Cj7Cs/

Answer 2

使用此代码：

jsFiddle

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

Answer 3

如果您不完全确定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 Fiddle demo

参考文献：

CSS：
- Child (E > F) combinator。
的JavaScript / DOM：
- Element.classList。
- JavaScript regular expressions。
- RegExp.test()。
- String.parseInt()。
- String.replace()。
jQuery的：
- filter()。

Answer 4

这将起到作用，假设id总是按照这样的降序排列。

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

我如何找到Ajax的子代添加内容然后执行一个功能

4 个答案: