如何从 td 元素内的 url 参数中找到确切的数字

Question

我有问题。我无法从 td 元素中找到确切的数字。如果我放下数字 25 进行搜索，它还会在 td 元素内分别找到数字 2 和 5。我只想让它找到 25。如果我找到数字 10，它也会突出显示数字 1。

这是 JSfiddle： https://jsfiddle.net/mxcw0Lbr/

代码如下：HTML

<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
</tr>
</table>

jQuery:

var search = "?" + [
"number=" + encodeURIComponent("25") ];

$('td').filter(function() {
  return search.indexOf(parseInt($(this).text(), 10)) != -1;
}).addClass('active');

CSS:

td {
color: #fff;
}

.picked {
color: #000;
}

.active {
color: #f30;
}

提前致谢。

Answer 1

如果您输入数字 25 进行搜索，它还会在 td 元素内分别找到数字 2 和 5。这是因为 indexOf() 方法 returns 可以在数组中找到给定元素的第一个索引。因此，即使 td 只有 2，filter 中的回调也会 returns 为真。否则它 returns 或 -1。如果你只是想让它找到25，你可以这样做

let $td=$('td');
$.each($td,function(){
  let $this=$(this)
  $this.toggleClass('active',$this.text()=='25');
});

或

$("td:contains('10')").addClass('active'); 如果你想要更少的代码

Answer 2

这是另一种方法

对于每个 td，您检查它是否对应于 called int 值。这样，无论调用的变量在 URL 中等于什么，它都会直接检查它。

JSFiddle：https://jsfiddle.net/mxcw0Lbr/3/

var search = "?" + [
  "called=" + decodeURIComponent("25")
  ].join("&");
  
$('td').filter(function() {
  return $(this).text() == search.match(/called=(\d+)/)[1];
}).addClass('active');

td {
 color: #fff;
 padding: 0px 5.4px;
 line-height: 42px;
}

.picked {
 color: #000;
}

.active {
 color: #f30;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
</tr>
</table>

如何从 td 元素内的 url 参数中找到确切的数字

how to find exact number from url parameters inside td element

javascript

jquery

filter

url-parameters