处理文档中的多个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，则可以尝试为这两个元素添加一个不同的类名：

<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

我以前去过那里：我不得不处理做奇怪事情的应用程序，将它们更改为“正确”会导致悲伤，而不仅仅是处理它并继续前进。 您知道重复的ID不好，我知道重复的ID不好； 让我们来解决问题。 （是的，它们很糟糕。是的，它们不应该在那里。不幸的是，它们在那里。）

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

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

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

这是窍门，即使这些元素都具有不同的ID，也会发生这种情况：当您单击子项LI时，该click事件将冒泡到父项。 我们需要关闭事件传播，以免再次触发click事件：

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，这会使它过于复杂。 只需在项目内部使用类，然后按以下方式调用它们即可：

 $("#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>