Question

This is def a newb question but after reading trough all the resources out there I still can’t figure out how this descendant thing works. I want to select all class link div’s contained in the art_menu div. How do I do that?

<div id="left">
    <div class="link">asdfgh</div>
    <div id="art_menu">
        <ul>
            <li><div class="link">bla bla</div><li>
            <li><div class="link">bla bla bla</div><li>
        </ul>
    </div>
</div>

I can select the first div, that’s outside the unordered list. I’ve tried with $(‘#art_menu ul li .link’).css(‘…’), that don’t work, I’ve tried $(‘#art_menu’).find(‘.link’).css(‘…’) that don’t work either. Can you please explain to me what I’m missing here?

edit: I’ve tried all the suggestions you gave me before, none of them work. the ul is injected dynamically with $(‘#art_menu’).load() and then .show(), could this be the problem?

$(document).ready(function() {
    $('#art_menu').load('get_cat.php');
    $("#art_menu").fadeIn();
    $('#art_menu .link').css("border","3px solid red"); 
} );

Answer 1

The problem is that you’re trying to operate on the links before they’re there:

$(document).ready(function() {
    $('#art_menu').load('get_cat.php');
    $("#art_menu").fadeIn();
    $('#art_menu .link').css("border","3px solid red"); 
    // ^^ too soon, the `load `isn't complete yet
} );

That should be:

$(document).ready(function() {
    $('#art_menu').load('get_cat.php', function() {
        // This callback happens after the load is complete
        $("#art_menu").fadeIn();
        $('#art_menu .link').css("border","3px solid red"); 
    });
} );

load is an asynchronous operation, the call to load just starts it. It completes some time later (when is dependent on network speeds and such). It has a callback it fires when the load is complete, which is where the code that needs to operate on the loaded content needs to go.

See also the discussion in the “re your edit” below.

---

Original answer:

Your examples should work, but your HTML has a typo in two places: Your li elements are not closed, you’ve used <li> at the end instead of </li>. Here’s a fixed example:

<div id="left">
    <div class="link">asdfgh</div>
    <div id="art_menu">
        <ul>
          <li><div class="link">bla bla</div></li>
          <li><div class="link">bla bla bla</div></li>
        </ul>
    </div>
</div>

Note that I also removed the display: none from the container, since otherwise we won’t see any effect of calling css on its descendants! With that, either of your exmaples should work (per the live link above).

---

Re your edit:

I’ve tried all the suggestions you gave me before, none of them work. the ul is injected dynamically with $('#art_menu').load() and then .show(), could this be the problem?

Possibly, if your code trying to operate on them is called prior to their actually being there. If your code operating on them is called only after they’re actually there, the fact they were injected later is irrelevant.

Here’s an updated working example using .load (live copy):

jQuery(function($) {

  $("#theButton").click(function() {
    // This code runs when the button is clicked
    $("#art_menu").load("http://jsbin.com/azaxev", function() {
      // This code runs when the load is complete
      $("#art_menu .link").css("color", "green");
    });
  });

  // This code runs when there are no links, so we never
  // see any effect form it
  $("#art_menu .link").css("font-weight", "bold");

});

The end result is that the links are green but not bold, because the line making them bold runs before they’re there, and so has no effect.