为什么我不能通过在 jquery 中将它们作为父 div 的子项来引用它们来修改图像的属性

Question

因为这是我的 HTML 四张图片：

    $('div#slideshow').children(function(index){
        $(this).width('90%');
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slideshow">
     <img style='position:relative;' width="400px" src="https://consumermediallc.files.wordpress.com/2014/11/totinos-stock-08-2014.jpg" alt="" />
     <img src="https://36.media.tumblr.com/66fa7962b68e90da541078fcc9efdc25/tumblr_inline_nnby3oQs8s1si7eaa_500.jpg" alt="Lightning Ghost" />
     <img src="http://ak-hdl.buzzfed.com/static/2014-05/enhanced/webdr02/14/7/enhanced-3829-1400068353-2.jpg" alt="Girraffe-dog" class="slide" />
     <img src="https://www.colourbox.com/preview/2291250-terrible-grimace-men-with-shovel.jpg" alt="Purpleish Kitty" />
    </div>

您能否解释一下为什么会这样，或者我在 jQuery 命令中做错了什么？我被难住了。

Answer 1

.children() 函数确实有一个参数，但它并不是一个对子元素进行操作的函数。它用于过滤子元素。

您可以在您的代码中使用 .children().each()，或者您可以这样做：

$("#slideshow > img").width("90%");

该库内置了隐式迭代，因此当您的选择器匹配多个元素时，它会自动对每个元素进行更改。

Answer 2

Children用于过滤，不会对每个元素做回调。为此，您需要 each:

$(function() {
  $('div#slideshow').children().each(function(index) {
    $(this).width('90%');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slideshow">
  <img style='position:relative;' width="400px" src="https://consumermediallc.files.wordpress.com/2014/11/totinos-stock-08-2014.jpg" alt="" />
  <img src="https://36.media.tumblr.com/66fa7962b68e90da541078fcc9efdc25/tumblr_inline_nnby3oQs8s1si7eaa_500.jpg" alt="Lightning Ghost" />
  <img src="http://ak-hdl.buzzfed.com/static/2014-05/enhanced/webdr02/14/7/enhanced-3829-1400068353-2.jpg" alt="Girraffe-dog" class="slide" />
  <img src="https://www.colourbox.com/preview/2291250-terrible-grimace-men-with-shovel.jpg" alt="Purpleish Kitty" />
</div>

或者直接使用css:

#slideshow > img {
  width: 90%;
}

<div id="slideshow">
  <img style='position:relative;' width="400px" src="https://consumermediallc.files.wordpress.com/2014/11/totinos-stock-08-2014.jpg" alt="" />
  <img src="https://36.media.tumblr.com/66fa7962b68e90da541078fcc9efdc25/tumblr_inline_nnby3oQs8s1si7eaa_500.jpg" alt="Lightning Ghost" />
  <img src="http://ak-hdl.buzzfed.com/static/2014-05/enhanced/webdr02/14/7/enhanced-3829-1400068353-2.jpg" alt="Girraffe-dog" class="slide" />
  <img src="https://www.colourbox.com/preview/2291250-terrible-grimace-men-with-shovel.jpg" alt="Purpleish Kitty" />
</div>

为什么我不能通过在 jquery 中将它们作为父 div 的子项来引用它们来修改图像的属性

Why can't I modify the properties of images by referencing them as children of their parent div in jquery

javascript

jquery

slideshow