Question

我写了这个：

<!doctype html>
<html>
<head>
  <script src="js/jquery-2.1.1.min.js"></script>
  <script>
    $(document).ready(function() {
      var people = '<li><img src="http://lorempixel.com/g/400/200/"></li>';
      people += '<li><span><img src="http://lorempixel.com/g/300/200/"></span></li>';
      var $images = $(people);
      $('ul').prepend(people);
      $images.find('img').css({
        'display': 'none'
      });
    });
  </script>
</head>
<body>
  <ul>
    <li>
      <img src="http://lorempixel.com/g/200/200/">
    </li>
    <li>
      <img src="http://lorempixel.com/g/300/300/">
    </li>
    <li>
      <img src="http://lorempixel.com/g/300/300/">
    </li>
  </ul>
</body>
</html>

我想添加新图像（当文档现在准备好，之后通过ajax添加）然后通过修改一些CSS属性来操作它们，但即使在这个简单的例子中我也无法使它工作。

$images.find('img')有效，但链式.css({'display':'none'});没有。

Answer 1

$images包含尚未包含在DOM中的元素 - 修改其display属性不会产生任何可见效果。

您可以改为：

...
$('ul').prepend(people).find('img').css({
    display: 'none'
});

Answer 2

$(document).ready(function() {
  var people = '<li><img src="http://lorempixel.com/g/400/200/"></li>';
      people += '<li><span><img src="http://lorempixel.com/g/300/200/"></span></li>';

  var $images = $(people);  
  $images.find('img').css('display', 'none');

  // or $images.find('img').css({'display': 'none'});

  $('ul').prepend($images);
});

http://jsbin.com/dozapi/1/

使用jQuery.find为css操作选择添加的图像不起作用

2 个答案: