別のjQueryセレクションのランダムサンプルであるjQueryセレクションを作成するには？

この質問はHow to get random element in jquery?と似ていますが、無作為に選ばれた要素の代わりに、kのランダムなサンプル要素（Pythonのrandom.sampleに似ています）のサブセットを取得したいとします。代わりにjQueryのオブジェクトの配列で入力するため別のjQueryセレクションのランダムサンプルである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; 
}

Iが入力jQueryオブジェクト代わりの配列である場合には、この関数を適応したいです。しかし、私は '空の' jQueryオブジェクトを作成して要素を 'プッシュ'する方法を見つけることができないので、これで苦労しています。

私が今やっているのは、選択された要素を（それにクラス"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>

は、この「変更と再クエリ」パラダイムは、ランダムにjQueryオブジェクトをサンプリングする唯一の方法ですか？

出典

2017-10-11 Kurt Peek

私はあなたのスクリプトを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

でそれを実行することができます

出典

2017-10-11 13:37:11 daremachine

別のjQueryセレクションのランダムサンプルであるjQueryセレクションを作成するには？

答えて

関連する問題