选择.load()之后的div的后代元素

Question

这是一个新的问题，但在阅读了所有的资源之后，我仍然无法弄清楚这个后代的事情是如何工作的。我想选择所有类链接div包含在art_menudiv。我怎么做呢?

<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>

我可以选择第一个div，它在无序列表之外。我已经尝试了$('#art_menu ul li .link').css('…')，那不起作用，我已经尝试了$('#art_menu').find('.link').css('…')，也不起作用。你能给我解释一下我错过了什么吗?

你给我的建议我都试过了，没有一个奏效。ul是动态注入$('#art_menu').load()，然后。show()，这可能是问题吗?

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

Answer 1

问题是你试图在链接出现之前对其进行操作:

$(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
} );

应该是:

$(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是一个异步操作，对load的调用只是开始它。它会在一段时间后完成(具体时间取决于网络速度等)。它有一个回调，当加载完成时触发，这是需要对加载的内容进行操作的代码需要去的地方。

请参阅下面"您的编辑"的讨论。

---

原始回答:

您的示例应该工作，但是您的HTML在两个地方有拼写错误:您的li元素没有关闭，您在末尾使用<li>而不是</li>。下面是一个固定的例子:

<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>

注意，我还从容器中删除了display: none，因为否则我们将看不到调用css对其后代的任何影响!这样，您的任何一个示例都应该工作(根据上面的活动链接)。

---

你的编辑:

你给我的建议我都试过了，没有一个奏效。ul是动态注入$('#art_menu').load()，然后.show()，这可能是问题吗?

有可能，如果你的代码在它们实际存在之前就被调用了。如果在之后对它们进行操作的代码只调用，那么它们实际上在那里，它们稍后被注入的事实是无关紧要的。

下面是使用.load(实时复制)的更新工作示例:

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");
});

最终的结果是链接是绿色的，但是不是粗体，因为使它们粗体的行在它们出现之前就运行了，所以没有效果。

Answer 2

你可以在jquery中使用.find()方法

$("#art_menu").find(".link");

也可以使用.children()

$("#art_menu").children(".link");

Answer 3

使用选择器

#art_menu .link

选择类为link且祖先id为art_menu的所有元素。

使用例子:

$("#art_menu .link").doSomething();