Question

我在处理重复ID时遇到问题。我也知道拥有相同ID的元素是非常糟糕的做法，但在这种情况下，我最终将不得不更改应用程序的大部分内容以更改ID，以便它们可以是唯一的。

我在使用jQuery中的元素切换类时遇到问题。我的结构如下：

<ul>
<li id="wl-7050"> <!-- This acts as a main data group holder for the below li elements -->
    <span></span>
    <div id="wlHeader-7050"></div>
    <div id="wlBody-7050">
        <ul>
            <li id="wl-7050"> <!-- This is the single element version of the data group header as above -->
                <div id="wlHeader-7050"></div>
            </li>
            <li id="wl-7051"></li>
            <li id="wl-7052"></li>
            <li id="wl-7053"></li>              
        </ul>
    </div>
</li>
</ul>

我需要的是一个函数，如果我点击ID wl-7050的第一个实例，子元素会收到一个新类。然而，如果我选择ID为wl-7050的第二个（单个）元素，那么只有那个元素添加了新类。

我尝试过使用jQuery：第一个＆amp; ：eq（0）属性，但遗憾的是没有运气。

我确实为每个li元素和它的子元素分配了类，但每当我运行$（'＃wl-7050：eq（0）'）时，它都会返回两者，并且还会使用父wl-7050元素。

我对JavaScript和jQuery答案很灵活。

Answer 1

id属性指定HTML元素的唯一ID（该值在HTML文档中必须是唯一的。）

你不能拥有两个wl-7050。使用类。然后继续工作＆＃34;在点击上添加新课程＆＃34;它只是硬代码。如果您需要帮助，我可以编辑我的答案。但这只是编码。 Html ID是一个概念

Answer 2

如果您无法更改ID，可以尝试为这两个元素添加不同的类名：

<ul>
<li id="wl-7050" class="wl-7050-main">
<span></span>
<div id="wlHeader-7050"></div>
<div id="wlBody-7050">
    <ul>
        <li id="wl-7050" class="wl-7050-single">
            <div id="wlHeader-7050"></div>
        </li>
        <li id="wl-7051"></li>
        <li id="wl-7052"></li>
        <li id="wl-7053"></li>              
    </ul>
</div>
</li>
</ul>

然后查询：

$("#wl-7050.wl-7050-main");
$("#wl-7050.wl-7050-single");

Answer 3

之前我曾经去过那里：我必须处理那些做奇怪事情的应用程序，将其更改为＆＃34;更正＆＃34;引起更多的悲痛而不仅仅是处理它并继续前进。你知道重复的ID是坏的，我知道重复的ID是坏的;让我们解决问题。（是的，他们很糟糕。是的，他们不应该在那里。不幸的是，他们在那里。）

您可以像处理元素上的任何其他属性一样处理ID：它们是属性，尽管是特殊属性。像这样的代码将用于选择具有相同ID的所有元素：$('[id=wl-7050]')。

现在，我们需要将click事件绑定到它们。我们会像以往一样做同样的事情：

var lis = $('[id=wl-7050]').click(function(e){
    console.log(this);
});

这就是诀窍，即使这些元素都具有不同的ID，也会发生这种情况：当您点击子LI时，该点击事件将冒泡到父级。我们需要关闭事件传播，因此我们不会触发两次点击事件：

var lis = $('[id=wl-7050]').click(function(e){
    e.stopPropagation();
    console.log(this);
});

现在我们正在开展业务，可以确定我们使用的LI哪种类型：顶级或儿童。

var lis = $('[id=wl-7050]').click(function(e){
    e.stopPropagation();
    if ($(this).children('li').length > 0) {
        // Top-level LI
    }
    else {
        // Child-level LI
    }
});

那应该可以让你到达你需要的地方。我们都同意再也不会谈论那些重复的ID。

Answer 4

您不需要为每个li添加一个ID会使其过于复杂。只需使用项目中的类并以这种方式调用它们：

＆＃13;

$("#group li").on("click", function(){
	alert($(this).data("id"));
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li id="wl-7050"> <!-- This acts as a main data group holder for the below li elements -->
    <span></span>
    <div id="header"></div>
    <div id="body">
        <ul id="group">
            <li data-id="1"> <!-- This is the single element version of the data group header as above -->
                <div class="wlHeader"></div>
            </li>    
            <li data-id="2"> <!-- This is the single element version of the data group header as above -->
                <div class="wlHeader"></div>
            </li>    
            <li data-id="3"> <!-- This is the single element version of the data group header as above -->
                <div class="wlHeader"></div>
            </li>          
        </ul>
    </div>
</li>
</ul>

＆＃13;

处理文档中的多个ID

4 个答案: