jQuery.append（）在类选择器的特定位置

Question

I have this jQuery code:

var $collapsibleProducts = $('.collapsible-body');
if ($collapsibleProducts.length != 0) {
  $.each($('.collapsible-body'), function (i) { 
    if ($('.collapsible-body')[i].children.length === 0) {
      $('.collapsible-body')[i].append("<span class='something'>something</span>")
    }
  });
}

But I only getting inside my div.collapsible-body this string "<span class='something'>something</span>" instead of html <span> tag with 'something' string.

Like this (image)

Is there something I doing wrong? or is there another way to do it?

Answer 1

No need to check for the length (jQuery's easy like that), and you're using the wrong kind of each. You're using the general iterator whereas jQuery has a special iterator for jQuery objects .

var $collapsibleProducts = $('.collapsible-body');

$collapsibleProducts.each(function(i, el) {
  if ($(el).children().length === 0) {
    $(el).append("<span class='something'>something</span>");
  }
});