從Jquery對象中選擇具有相同屬性的div

Question

我有一個6格的網格，屬性爲row，它們在屬性爲col的兩個div之間平均嵌套。當頁面加載時，我想隨機選擇其中一行並應用類.show，因此這兩個div與row="1"將是一個row。從這裏，當單擊文檔時，我希望隨機選擇其餘兩行中的一行，並對其應用類.show。當再次點擊文檔時，最後剩餘的row顯示已應用.show。現在所有三個row都有類.show。如果文檔再次被點擊，則應該重新啓動視覺循環，以便只有一個隨機選擇的div具有類別.show。

我已創建一個jsfiddle到目前爲止的代碼。我無法解決的是如何選擇具有相同row屬性的div。

<div id="cnt"> 
    <div col=0> 
     <div row="0">0</div> 
     <div row="1">1</div> 
     <div row="2">2</div> 
    </div> 
    <div col=1> 
     <div row="0">0</div> 
     <div row="1">1</div> 
     <div row="2">2</div> 
    </div> 
</div> 

JS

$(document).ready(function() { 

function selectDiv(){ 
    var notSelectedDivs = $("div[row]:not(.show)"); 

    if(!notSelectedDivs.length){ 
     $('.show').removeClass('show'); 
     notSelectedDivs = $("div[row]:not(.show)"); 
    } 
    var randomIndex = Math.floor((Math.random() * 3)); 
    $(notSelectedDivs).attr('row', randomIndex).addClass('show'); 
} 


$(document).on("click", function() { 
    selectDiv(); 
}); 
selectDiv(); 
}); 

Answer 1

與行的div可以通過使用jQuery選擇[row=value]找到。所以與隨機指數：$('div[row=' + randomIndex + ']')

快速示例（上界硬編碼的例子中的行）：fiddle

編輯實施例實現：

$(document).ready(function() { 
 

 
let rowDivs = $('div[row]'); 
 

 
function selectDiv(){ \t 
 
    let notSelectedDivs = rowDivs.not('.show'); 
 
    
 
    if(!notSelectedDivs.length) 
 
     notSelectedDivs = rowDivs.removeClass('show'); 
 
    
 
    var randomIndex = notSelectedDivs.get(Math.floor((Math.random() * notSelectedDivs.length))).getAttribute('row'); 
 
    $('div[row=' + randomIndex + ']').addClass('show'); 
 
} 
 

 

 
$(document).on("click", function() { 
 
    selectDiv(); 
 
}); 
 
selectDiv(); 
 
});

#cnt { 
 
    display: flex; 
 
} 
 
div[row] { 
 
    width: 20px; 
 
    border: 1px solid black; 
 
} 
 
.show { 
 
    background-color: yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="cnt"> 
 
     <div col=0> 
 
      <div row="0">0</div> 
 
      <div row="1">1</div> 
 
      <div row="2">2</div> 
 
     </div> 
 
     <div col=1> 
 
      <div row="0">0</div> 
 
      <div row="1">1</div> 
 
      <div row="2">2</div> 
 
     </div> 
 
    </div>