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

时间:2018-12-17 08:54:28

标签: javascript jquery filter url-parameters

我有问题。我无法从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;
}

谢谢。

2 个答案:

答案 0 :(得分:1)

这是另一种方式

对于每个td,请检查其是否对应于var search = "?" + [ "called=" + decodeURIComponent("25") ].join("&"); $('td').filter(function() { return $(this).text() == search.match(/called=(\d+)/)[1]; }).addClass('active'); int值。这样,无论调用的变量在URL中等于什么,都将直接对其进行检查。

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

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>
{{1}}

答案 1 :(得分:0)

如果您放下数字25进行搜索,它还会在td元素内分别找到数字2和5。这是因为indexOf()方法返回的第一个索引可以在数组中找到给定的元素。因此,即使filter仅具有td,在2中的回调也将返回true。否则返回或-1。如果只希望它找到25,则可以执行以下操作

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

OR

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