javascript - 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() .