通过jQuery中的HTML索引查找和设置HTML的单个元素的样式 [英] Find and style individual elements of HTML through their index in jQuery
问题描述
我正在参加一个聚会游戏(即Tambola/Housie)，在这里我想自动识别在housie板上标注的每张票证上的所有数字.例如:如果已调出86，那么我想在票证编号上突出显示它(即更改其字体颜色或背景颜色). 2和3.问题是票证正以html的形式显示在页面上，因为它是从另一个要创建票证的网页复制而来的.因此，我想要一个可以找到这些数字然后分别为它们上色的解决方案.任何帮助将不胜感激.
I am working on a party game (i.e. Tambola/Housie) where I want to automatically identify all the numbers on each ticket that have been called out on the housie board. For example: if 86 has been called out then I want to highlight it (i.e. change its font color or background color) on ticket no. 2 and 3 respectively. The problem is the tickets are getting displayed on the page as an html as it has been copied from another webpage where they are getting created. So, I want a solution which can find these numbers and then color them individually. Any help will be greatly appreciated.
这些表是在当前编号"之下的那些.在图像中.这些桌子不过是坦波拉门票.不.这些表中的是随机数，并借助函数生成.这些数字不在我的控制范围内.我想要实现的是每当主机调用一个数字时，即在我们的示例中，它们将为1,3,45,46,48,49,50,86,87,90，我想检查一下是否为这些数字.出现在每张票中.如果是，则更改相应票证中这些数字的字体颜色或背景颜色
These tables are the ones which are below "current nos." in the image. These tables are nothing but tambola tickets. The nos. in these tables are random numbers and get generated with the help of a function. These numbers are not in my control. What I want to achieve is whenever a number is called by the host i.e. in our example they will be 1,3,45,46,48,49,50,86,87,90, I want to check whether these nos. are present in each of the tickets. If yes, then change the font color or background color of those numbers in the respective tickets
我在每个数字之间插入了空格"，以便我可以轻松找到它们.表格中每个数字前后都有空格.例如:运行$(#tickets).text()将给出此输出-
I have inserted 'space' between each number so that I can find them easily. There is space before and after each number in the table. For example: running $(#tickets).text() will give this output -
- 1 32 54 72 81 ...等(参考图片).
我为识别数字而编写的一些代码如下:
Some code that I have written to identify the numbers is as follows:
<body>
<div id='tickets' style="font-size: 40px">
</div>
<script>
var array = [];
var num = [1,3,45,46,48,49,50,86,87,90] //numbers are actually getting picked from local storage
var clonetkt = localStorage.getItem("checktiks"); //cloning tickets as html from another webpage
for (i = 1; i <= 90; i++) {
array.push(i);
}
for (a = 0; a <= num.length; a++) {
for (b = 0; b < 90; b++) {
if (array[b] == num[a]) {
array[b] = 0;
}
}
}
function recreatetable() {
$('#tickets').html(clonetkt); //displaying ticket tables as html
var z;
var n;
if (array[i - 1] == 0) {
z= " " + i + " "; //inserting space to match with elements of the ticket
n = $('#tickets').text();
$('#tickets').each(function(){ //trying to match elements of the ticket but works only on the first find. will not find more than one occurrence
n = $('#tickets').text().indexOf(z);
if (n >=0){
console.log($('#tickets').text()[n+1] + $('#tickets').text()[n+2]); //to check whether the number was actually found in #tickets
}
});
}
}
recreatetable(0);
</script>
</body>
请帮助！
下载.js文件以生成票证: https://drive.google.com/file/d/1CxmEO1jBOVft6y68BZyuXBAAby7lXwi2/view?usp=drivesdk
download .js file from here for ticket generation: https://drive.google.com/file/d/1CxmEO1jBOVft6y68BZyuXBAAby7lXwi2/view?usp=drivesdk
推荐答案
我将使用两个单独的循环，而不是将两个循环包装到另一个循环中，这会降低性能.也可以使用模运算符来简化创建<tr>的步骤，如下所示.请注意，我无法使用LocalStorage变量，因为它们的内容未在您的代码中描述；根据要求修改您的代码.
I would use two separate loops instead of wrapping two loops into another which is way less performant. Creating the <tr> can also be simplified by using the modulo operator as shown here. Please note that I could not use LocalStorage variables as their contents were not described in your code; adapt your code as required to this answer.
我还建议摆脱诸如<center>之类的已弃用元素，而改用CSS类(例如td { text-align: center; }).
I would also recommend to get rid of deprecated elements like <center> and use CSS classes instead (e.g. td { text-align: center; }).
var clonetkt = '1 6 8 11 43 59'; //localStorage.getItem("checktiks");
let $tickets = $('#tickets');
function highlightMatches() {
let matches = $tickets.html().split(' ');
for (let match of matches) {
$('#td' + match).addClass('highlight');
}
}
function recreateTable() {
$tickets.html(clonetkt); //cloning tickets from another webpage in this div (i.e. 'tickets')
var boardhtml = "<table border='1'>";
for (let i = 1; i <= 90; i++) {
if (i % 10 === 1) {
boardhtml += "<tr>"; //creating housie board at top
}
boardhtml += "<td id='td" + i + "'>" + i + "</font></td>";
if (i % 10 === 0) {
boardhtml += "</tr>";
}
}
boardhtml += "</table>";
document.getElementById('board').innerHTML = boardhtml;
highlightMatches();
/*
var prenoary = JSON.parse(localStorage.getItem("previousNos"));
$('#pnos').append(prenoary + " ");
var crrtnoary = JSON.parse(localStorage.getItem("currentNos"));
$('#cnos').append(crrtnoary + " ");
*/
}
recreateTable();
body {
font-family: 'Open Sans', sans-serif;
}
.highlight {
background: green;
color: white;
}
h1,
td,
div.info {
text-align: center;
}
#hboard {
margin: 20px auto;
}
#hboard #board {
text-align: center;
font-size: 32px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="housiebd">
<h1>
HOUSIE BOARD
</h1>
<table id="hboard">
<tr>
<td id="board">
</td>
</tr>
</table>
</div>
<div class="info">
<div id='pnos' style="font-size: 40px">
Previous Nos.:
</div>
</div>
<div class="info">
<div id='cnos' style="font-size: 40px">
Current Nos.:
</div>
</div>
<div class="info">
<div id='tickets' style="font-size: 40px">
</div>
</div>
这篇关于通过jQuery中的HTML索引查找和设置HTML的单个元素的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
