JQuery 选择器 ul li

Question

我正在尝试获取无序列表中的所有图像 src，这是 HTML:

<ul id="slideshow">
        <li>
            <h2 rel="yummy fruit!">Fruit</h2>
            <img src="images/fruit.jpg" alt="fruit" />
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </li>
        <li>
            <h2>Vegetables</h2>
            <img src="images/vegetable.jpg" alt="vegetables" />
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </li>
        <li>
            <h2>Bread</h2>
            <img src="images/bread.jpg" alt="bread" />
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </li>
    </ul>

为此，我正在使用此功能：

$(document).ready(function () {
    $("#btn1").click(function () {
            var $images = $('#slideshow img').attr('src');;
            console.log($images);
    });
});

问题是我只得到了第一个 src (images/fruit.jpg)，然后我需要随机排序那些图像，有帮助吗？

Answer 1

一种方法如下：

// gets an array of each of the <img> elements'
// src property:
var imgSources = $('img').map(function() {
  return this.src;
}).get();

// iterates over each of the <img> elements, and updates
// its src property:
$('img').prop('src', function() {
  // index: is a random number between 0 and the last index of
  // the array:
  var index = Math.floor(Math.random() * imgSources.length),
  // source: one of the array elements:
    source = imgSources[index];
  // removing the used array-element, to ensure all elements are used,
  // and there are no duplicates:
  imgSources.splice(index, 1);

  // returning the found-element as the new src:
  return source;
});

var imgSources = $('img').map(function() {
  return this.src;
}).get();

$('img').prop('src', function() {
  var index = Math.floor(Math.random() * imgSources.length),
    source = imgSources[index];
  imgSources.splice(index, 1);
  return source;
});

h2 + img {
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="slideshow">
  <li>
    <h2 rel="yummy fruit!">Fruit</h2>
    <img src="http://lorempixel.com/100/100/nature/Image%201" alt="fruit" />
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </li>
  <li>
    <h2>Vegetables</h2>
    <img src="http://lorempixel.com/100/100/nightlife/Image%202" alt="vegetables" />
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </li>
  <li>
    <h2>Bread</h2>
    <img src="http://lorempixel.com/100/100/people/Image%203" alt="bread" />
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </li>
</ul>

我刚刚想到这可以很容易地在本机 JavaScript 中实现，而且几乎很简单：

// retrieving a NodeList of all <img> elements, using
// Array.prototype.slice, with Function.prototype.call(),
// to convert that NodeList to an Array:
var images = Array.prototype.slice.call(document.getElementsByTagName('img'), 0),
  // Array.prototype.map used to create a new Array,
  // storing the src properties of each of the <img> elements:
  imgSources = images.map(function(img) {
    // img: the current <img> from the array of <img>s over
    // which we're iterating:
    return img.src;
  });

// iterating over each of the <img> elements:
images.forEach(function(img) {
  // img: again the current <img> element from the array
  // of images.

  // creating a random number between 0 and one less-than
  // (using Math.floor()) the length of the array:
  var index = Math.floor(Math.random() * imgSources.length),
    // caching an element from the imgSources array:
    newSource = imgSources[index];

  // removing the array-element, at the random index point,
  // from the array:
  imgSources.splice(index, 1);

  // updating the src property of the current <img>:
  img.src = newSource;
});

var images = Array.prototype.slice.call(document.getElementsByTagName('img'), 0),
  imgSources = images.map(function(el) {
    return el.src;
  });

images.forEach(function(img) {
  var index = Math.floor(Math.random() * imgSources.length),
    newSource = imgSources[index];
  imgSources.splice(index, 1);
  img.src = newSource;
});

h2 + img {
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="slideshow">
  <li>
    <h2 rel="yummy fruit!">Fruit</h2>
    <img src="http://lorempixel.com/100/100/nature/Image%201" alt="fruit" />
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </li>
  <li>
    <h2>Vegetables</h2>
    <img src="http://lorempixel.com/100/100/nightlife/Image%202" alt="vegetables" />
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </li>
  <li>
    <h2>Bread</h2>
    <img src="http://lorempixel.com/100/100/people/Image%203" alt="bread" />
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </li>
</ul>

参考文献：

• JavaScript:
  • Array.prototype.forEach().
  • Array.prototype.map().
  • Array.prototype.slice().
  • Array.prototype.splice().
  • document.getElementsByTagName().
  • HTMLImageElement.
  • Math.floor().
  • Math.random().
• jQuery:
  • get().
  • map().
  • prop().

Answer 2

您可以遍历每个 img 以获取如下来源：

$(document).ready(function () {
    $("#btn1").click(function () {
        var images = new Array();
        $('#slideshow img').each(function (index, element){
            images.push(element.attr('src'));
        });
        console.log(images);
    });
});

这会将所有来源放入列表中。如果您想对列表进行随机排序，javascript 中有很多关于如何执行此操作的资源，例如：