Question

这个问题类似于How to get random element in jquery?，除了不是一个随机选择的元素，我想获得 k 不同的随机抽样元素的子集（类似于Python＆＃ 39; s random.sample）。

对于数组而不是jQuery对象的输入，我想出了以下内容：

function randomSample(arr, k) {
    var arr = arr.slice();      // Work with a copy of the original array
    var samples = [];
    var i;
    for (i = 0; i < k; i++) {
        randomIndex = Math.floor(Math.random() * arr.length);
        samples.push(arr.splice(randomIndex, 1)[0]);
    }
    return samples;
}

我想将此函数适用于输入是jQuery对象而不是数组的情况。但是，我正在努力解决这个问题，因为我无法找到一种方法来创造一个空洞的“空洞”。 jQuery对象和＆＃39;推送＆＃39;它的元素。

我现在正在做的是改变所选元素（通过向其添加类"yellow"），然后使用not.(".yellow")重新运行jQuery选择器，以便无需替换即可进行采样。这是一个片段（改编自https://api.jquery.com/slice/）：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>slice demo</title>
  <style>
  div {
    width: 40px;
    height: 40px;
    margin: 10px;
    float: left;
    border: 2px solid blue;
  }
  span {
    color: red;
    font-weight: bold;
  }
  button {
    margin: 5px;
  }
  .yellow {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<p><button>Turn slice yellow</button>
  <span>Click the button!</span></p>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>

<script>
function colorEm(k) {
  var $div = $("div");
  $div.removeClass("yellow");

  var i;
  for (i = 0; i < k; i++) {
    var $notYetHighlighted = $("div").not(".yellow");
    var start = Math.floor(Math.random() * $notYetHighlighted.length);
    var end = start + 1;
    if (end === $notYetHighlighted.length) {
      end = undefined;
    }
    if (end) {
      $notYetHighlighted.slice(start, end).addClass("yellow");
    } else {
      $notYetHighlighted.slice(start).addClass("yellow");
    }
  }
}

$( "button" ).click( function() { colorEm(3) } );
</script>

</body>
</html>

这是否正在修改和重新查询＆＃39;范例是随机抽样jQuery对象的唯一方法吗？

Answer 1

我将你的脚本重写为jquery函数。我认为以后很容易改变它。

/**
 * MyFunction to highliting div
 */
$.fn.myFunctionName = function(e) {
  let num = e.data.num;
  let bgCss = "yellow";
  let elements = $('div');
      elements.removeClass(bgCss); // remove highlight class from all divs


  function doHighlite() {
    let randomSquere = Math.floor(Math.random() * elements.length); // get random element index

    // add class if not exist or try generate next element
    if(!$(elements[randomSquere]).hasClass(bgCss)) {
        $(elements[randomSquere]).addClass(bgCss);
    }
    else {
      doHighlite();
    }
  };

  // highlight desired number of elements
  for(let i=0; i<num;i++) {
    doHighlite();
  }
}

您可以使用参数num

运行它

$(".red").on('click', { num: 5 }, $.fn.myFunctionName);

JSFIDDLE DEMO

如何创建一个jQuery选择，这是另一个jQuery选择的随机样本？

1 个答案: