Question

我有这样的代码：

<div class="container">
  <div class="row">
    <div class="col-xs-6 col-sm-3 col-md-2 prcolor">Test</div>
    <div class="col-xs-6 col-sm-3 col-md-2 prcolor">Test</div>
    <div class="clearfix visible-xs"></div>
    <div class="col-xs-6 col-sm-3 col-md-2 prcolor">Test</div>
    <div class="col-xs-6 col-sm-3 col-md-2 prcolor">Test</div>
    <div class="clearfix visible-sm"></div>
    <div class="clearfix visible-xs"></div>
    <div class="col-xs-6 col-sm-3 col-md-2 prcolor">Test</div>
    <div class="col-xs-6 col-sm-3 col-md-2 prcolor">Test</div>
    <div class="clearfix visible-lg"></div>
    <div class="clearfix visible-md"></div>
    <div class="clearfix visible-xs"></div>
  </div>
</div>

当我点击带有prcolor类的div时，我想在与班级visible-xs最近的兄弟姐妹之后插入新的div。

我尝试了$.next('.visible-xs')，$.closest('.visible-xs')，$.siblings('.visible-xs')，$.nextAll('.visible-xs')，但正如我读到的那样，只有在DOM中找不到函数时才接受选择器。< / p>

$('.prcolor').on('click', function() {
  $(this).nextAll('.visible-xs').after('<div>Inserted div</div>');
});

但这没有做任何事情，之后没有插入div。我哪里错了？

点击第一个.prcolor后的预期示例：

<div class="container">
  <div class="row">
    <div class="col-xs-6 col-sm-3 col-md-2 prcolor">Test</div>
    <div class="col-xs-6 col-sm-3 col-md-2 prcolor">Test</div>
    <div class="clearfix visible-xs"></div>
    <div>Inserted div</div>
    <div class="col-xs-6 col-sm-3 col-md-2 prcolor">Test</div>
    <div class="col-xs-6 col-sm-3 col-md-2 prcolor">Test</div>
    <div class="clearfix visible-sm"></div>
    <div class="clearfix visible-xs"></div>
    <div class="col-xs-6 col-sm-3 col-md-2 prcolor">Test</div>
    <div class="col-xs-6 col-sm-3 col-md-2 prcolor">Test</div>
    <div class="clearfix visible-lg"></div>
    <div class="clearfix visible-md"></div>
    <div class="clearfix visible-xs"></div>
  </div>
</div>

DEMO

感谢。

Answer 1

如果您想将最近的跟随兄弟姐妹与特定班级匹配，可以使用与$.fn.nextAll()链接的$.fn.first()。 e.g：

$('.prcolor').on('click', function() {
  $(this).nextAll('.visible-xs').first().after('<div>INSERTED</div>');
});

在最近的兄弟与指定的类之后插入div

1 个答案: