JQuery only append to child

Question

Please help me to understand why it's doing that :o

// ==UserScript==
// @name        GMod Cinema Porn
// @namespace   Bluscream
// @version     1.0
// @description H3H3
// @author      Bluscream
// @include     https://www.youtube.com/embed/OiMTuwS3xvg*
// @include     http://cinema.pixeltailgames.com/search.html
// @include     *
// @grant       unsafeWindow
// @grant       GM_xmlhttpRequest
// @require     https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js
// @run-at      document-end
// ==/UserScript==
(function() {
    'use strict';
    if (window.location.href.startsWith("https://www.youtube.com/embed/OiMTuwS3xvg")) {
        window.location.href = "http://embed.redtube.com/player/?id=42019&autostart=true";
    } else if (window.location.href == "http://cinema.pixeltailgames.com/search.html"){
        $ = jQuery || $;
        $( document ).ready(function() {
            temop = $('#content-container').children('div[style="text-align:center;font-size:0;"]:first');
            temop.append('<service>').css('background-image', 'url("http://cdn1-www.craveonline.com/assets/uploads/2013/12/man_file_1048340_youporn-icon.png")').click(function () {
                window.selectService("YouPorn", "http:\/\/www.youporn.com");
            }).hover(function () {
                window.hoverService();
            });
        });
        //$('#content-container>div[style="text-align:center;font-size:0;"]').append('<service style=\'background-image:url(\"logos\/youtube.png\")\' onclick=\'selectService(\"YouTube\",\"http:\/\/www.youtube.com\")\' onmouseover="hoverService()">-</service>');
    }
})();

Answer 1

You can use the :first or the :first-child selector. For only the last you should use the :last selector.

For any other element you can use the index of the element. jQuery will create an array of all the elements he finds with append-something class. So the first element will be index of 0.

$("#trigger-first").click(function() {
// ":first" and ":first-child" will work.
    $(".append-something:first").append("Some Stuff");
});

$("#trigger-last").click(function() {
// ":last" for last option.
    $(".append-something:last").append("Some Stuff");
});

$("#trigger-second").click(function() {
// It will return an array of item so you can request on index.
    $($(".append-something")[1]).append("Some Stuff");
});