Question

I’m new to javascript and jquery.

What does this selector mean: ” #LayoutColumn2 > div > div > div > ul”

Contect (the function it comes from):

function loadNextTier(tierID, changedItemValue) {
    linkArray.length = 0;
$("#placeholderForLoad").load(changedItemValue + " #LayoutColumn2 > div > div > div > ul", function(){
    $("#placeholderForLoad li").each(function(){
        var itemName = $(this).children("a").text();
        var itemValue = $(this).children("a").attr("href");
        linkArray.push(itemValue+";"+itemName);
    });
    if (tierID == "tier1") {
        tierID = "tier2";
    }
    else if (tierID == "tier2"){
        tierID = "tier3";
    }
    else if (tierID == "tier3") {
        tierID = "tier4";
    }
    resetTiers(tierID);
    fillMyList(linkArray, tierID);
});

Answer 1

It will match the following structure

<any_tag id="LayoutColumn2">
  <div>
    <div>
      <div>
        <ul> <-- matches this tag
          <li>
            <ul> <-- doesn't match. you only fetched children, not descendants

#LayoutColumn2 > div > div > div > ul means:

get the <ul> that is a child of a <div>, which is a child of a <div>, which is a child of a <div>, which is a child of a tag with an id of LayoutColumn.

By the way, the term descendant means any element that comes nested (no matter how deep) in a certain element. CSS selectors, without combinators, normally target descendants.

The term child or children means elements that are direct descendants or are descendants only 1 level deep from the element. That’s the purpose of >.