html标签同名id的解决方法

如下html和js

<!--  第一个modal页面里面有如下代码 -->
<input type="text" class="form-control" id="myid" name="myname" value="myid1">
<!--  第二个modal页面里面有如下代码 -->
<input type="text" class="form-control" id="myid" name="myname" value="myid2">

var s = $("#myid").val();
$("#myid").attr("value","www");

同一个页面上(含引入的页面)如果有多个同名id，则根据id获取属性则只会对第一个有效，其他无效取不到而且js也不会报错，那就要通过浏览器找找是否有同名id存在了，最直接的解决方案是修改ID使得不同名。

但有时id不能随便改，比如我在父页面上引入一个modal正常没问题，引用两个公共modal到一起后出现了同名的id。因为是公共通用的modal如果修改id，则其他很多引用了此modal的页面都会受到影响。

如上例子，js只能操作第一个input，若想操作第二个input，解决方法很简单，标签选择器换个写法即可。

<!--  第二个modal页面里面有如下代码 -->
<input type="text" class="form-control diff" id="myid" name="myname" value="myid2">

用id选择器+ 类选择器
var s = $("#myid,.diff").val();
$("#myid,.diff").attr("value","www");
或者 仅用类选择器
var s = $(".diff").val();
$(".diff").attr("value","www");

这样修改后第一个modal的js还是原来的写法，通过id获取值，虽然有同名存在，但它取第一个还是能取到的。第二个modal的js因id同名取不到第二个input，在第二个input 的样式后面随便加点什么，这样两个input 的样式就是不一样的，便可以通过样式唯一获取到了。

常用选择器如下

id选择器 $("#id")、
类(class）选择器$(".class")、
标签选择器$("input")、 比如清空页面全部input的值
包含选择器$("#id input") 比如清空某from表单里input的值
属性选择器$("div[id]")、$("div[class!=diff]") 有id属性的div、没有样式为diff的div
过滤选择器$("li:first") 第一个li，除了first还有last最后一个li，odd奇数li，even偶数li，eq/gt/lt(N)等于/大于/小于N的li。注：索引是从0开始计数的
筛选选择器$("div").eq(N)、$("div").first()、除了first()还有last(),parent('.p1'),find('button'),children('#id'),siblings('li')等等

前面三种用的最多，与以下同效
document.getElementsById("yourid");
document.getElementsByName("yourname");
document.getElementsByTagName("yourtagname");

网上也有很详细的介绍选择器