Example of dynamic selection using variables in Jquery selector

Example of dynamic selection using variables in Jquery selector_jquery

WBOY

Release： 2016-05-16 16:41:16

Original

1582 people have browsed it

Example 1:

<table>
  <tr>
    <th>用户名</th>
    <th>状态</th>
  <tr>
  <tr>
    <td>张三</td>
    <td data-uid="10000">正常</td>
  <tr>
  <tr>
    <td>李四</td>
    <td data-uid="10001">冻结</td>
  <tr>
  <tr>
    <td>王二麻子</td>
    <td data-uid=10002>冻结</td>
  <tr>
</table>

<script type="text/javascript">
$(document).ready(function(){
  var uid = 1001;
  $("td[data-uid = "+ uid +"]").html('正常');
}
</script>

Copy after login

Example 2:

<script type="text/javascript">
 $(function(){
  alert(123);
  var v=4;
  var test=$("input[type='radio'][value='"+v+"']");//直接拼接字符串就可以了
  console.info(test);
  var testValue=test.attr({"checked":true});
  console.info(testValue);
 }); 
 </script>
 
 <body>
  This is my JSP page. <br>
  <table>
 <tr>
 <td>性别：</td>
 <td>
  <input name="sex" type="radio" value="0"/>男 0
  <input name="sex" type="radio" value="1"/>女 1
  <input name="sex" type="radio" value="2"/>女 2
  <input name="sex" type="radio" value="3"/>女 3
  <input name="sex" type="radio" value="4"/>女 4
 </td>
 </tr>
  </table>
 </body>

Copy after login

Example 3, issues you should pay attention to when using variables in selector parameters in jQuery

This is the original code

var li_index = $(this).index();

var $content_index = li_index + 2;

var $content_progress = $(“div.content:eq(” + $content_index + “)”);

var $newavalue = $(this).find(“a”).attr(“name”);

var $resource = $(this).find(“a”).html().replace(“首页”,$newavalue);

var $afterresource = $resource.replace($newavalue,””);

var $afterresource = $newavalue + $afterresource.replace(“首页”,$newavalue);

Copy after login

What is implemented is keyword replacement, but it is no longer executed on the third line. Debugging and replacement will not work. I have been asking questions in various groups from morning until just now, and finally... Master Lomu from our base camp burst into tears:

Your writing is wrong

Require connector

$(“div.content:nth-child($content_index)”);

Copy after login

changed to

$(“div.content:nth-child(” + $content_index + “)”);

Copy after login

The key is that there are quotation marks outside

There are quotation marks that are treated as strings

To be honest, I feel like something basic is wrong now, and I can’t find the problem just by debugging it on my own. For example, I have never seen the number just now when I read it. Baidu doesn't know what keywords this error occurs. I really don’t know that when using variables in a selector, you also need to use the sign. The "Sharp jQuery" does not clearly say that when using variables in the selector, you also need to use the sign, including our w3cschool.