Question

我有几个<div>个元素，每个元素都有相同的类，包含2个兄弟。我想在最后一个兄弟中附加一个元素，但该元素不能包含子元素......

E.g

<div class="form-group">
  <div class="checkbox">
    <label>
      <input type="checkbox"/> Checkbox 1
    </label>
  </div>
  <div class="checkbox ">
    <label>
      <input type="checkbox "/> Checkbox 2
    </label>
  </div>
  <div class="checkbox ">
    <label>
      <input type="checkbox "/> Checkbox 3
    </label>
  </div>
</div><!-- form-group -->

所以我的jQuery代码如下，但它不起作用......

$(function() {
  var div = $("div"),
      $element = '<span></span>';
  div.each(function(i, el) {
    if (el.hasClass("class-name")) {
      $(el).nextAll().eq(1).append($element);
    }
  });
});

我已经包含了IF声明，但只是附加了元素到目标（这里我指的是<input>元素目标）只在<div>内，所以其他元素不会包括在内。

知道如何在这种情况下实现这一目标吗？

感谢。

Answer 1

不知道你对“孩子”评论的确切意图我提出了三个

这将追加到最后一个元素：

$(function() {
  var div = $("div.class-name"),
    $element = '<span></span>';
  div.last().append($element);
});

这会在最后一个后添加新的范围：

$(function() {
  var div = $("div.class-name"),
    $element = '<span></span>';
  div.last().after($element);
});

这将使用span替换最后的元素内容：

$(function() {
  var div = $("div.class-name"),
    $element = '<span></span>';
  div.last().html($element);
});

注意在编辑之后，我假设您要在最后一个复选框元素标签后附加一个跨度，这样就可以了：

$(function() {
  var div = $("div.checkbox");
  var lastelementwithnochildren = div.find('*:not(:has("*"))').last();
  $element = '<span>howdy</span>';
  lastelementwithnochildren.parent().append($element);
});

如果您希望在输入之后的标签文本之前显示跨度，请将最后一行更改为：

lastelementwithnochildren.after($element);

JavaScript - 使用jQuery附加到不能包含子元素的元素

1 个答案: