处理文档中的多个 ID

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以及它的：first和：eq(0(属性，但不幸的是仍然没有运气。

我确实为每个 li 元素分配了类，它是子元素，但每当我运行 $('#wl-7050：eq(0('(时，它都会返回两者，并且父 wl-7050 元素也得到了使用。

我对 JavaScript 和 jQuery 的答案很灵活。

Answer 1

id

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

您不能有两个 wl-7050。使用类。然后要处理"单击时添加新类"，它只是硬代码。如果您需要帮助，我可以编辑我的答案。但只是编码。Html ID是一个概念

Answer 2

我以前去过那里：我不得不处理做奇怪事情的应用程序，将它们更改为"正确"比仅仅处理它并继续前进会导致更多的悲伤。你知道重复的ID是不好的，我知道重复的ID是不好的;让我们对问题进行排序。(是的，他们很糟糕。是的，他们不应该在那里。不幸的是，他们在那里。

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

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

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

这是诀窍，即使这些元素都有不同的 ID，也会发生这种情况：当您单击子 LI 时，该单击事件将冒泡到父 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 3

如果无法更改 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 4

你不需要为每个 li 添加一个 id，这会让它变得过于复杂。只需在项目中使用类并按以下方式调用它们：

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

<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>