从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>