获取单击的UL LI选择框的父DIV ID

Getting the parent DIV ID of the clicked UL LI select box

本文关键字：DIV ID LI 单击 UL 获取 选择      更新时间：2023-09-26

似乎我在掌握jQuery语言方面的明显尝试失败了

我正试图获取UL LI选择框的DIV id，但我的警报框返回"未定义"，因此我正在寻求专家帮助。

以下是有问题的标记和代码：

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.11.3.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
* {
    font-family: Segoe UI;
    font-size: 9pt;
}
.select {
    background: url(arrow.png) no-repeat scroll right top;
    border: 1px solid rgb(170,170,170);
    width: 180px;
    padding: 3px;
}
.select:hover {
    cursor: pointer;
}
.select ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    cursor: pointer;
}
.select ul li {
    display: none;
    padding: 1px;
}
</style>
<script type="text/javascript">
window.onload = function() {
    $(".select").click(function () {
        $(this).find('ul li').toggle();
    });
    $(".select ul li").click(function(e) {
        $(this).closest('div.select').text($(this).html());
        //alert($(this).closest('div.select').attr("id"))
        //alert($(this).closest('[id]').attr('id'))
        //alert($(this).closest('div.select').attr('id'))
    });
}
</script>
</head>
<body>
<div class="select" id="numbers">Select Box1
    <ul>
        <li>1234</li>
        <li>5678</li>
        <li>0123</li>
    </ul>
</div>
<br><br>
<div class="select" id="letters">Select Box2
    <ul>
        <li>abcd</li>
        <li>efgh</li>
        <li>ijkl</li>
    </ul>
</div>
<br><br>
<div class="select" id="fruits">Select Box3
    <ul>
        <li>apples</li>
        <li>bananas</li>
        <li>oranges</li>
    </ul>
</div>
</body>
</html>

.text($(this).html()这一行扰乱了DOM，并导致遍历问题。我建议你使用其他方法来完成文本更改。像

$(this).closest("div").contents().first().replaceWith($(this).text());

$(".select ul li").click(function(e) {
  $(this).closest("div").contents().first().replaceWith($(this).text());
  var id = $(this).closest('[id]').attr('id');
  alert(id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="select" id="numbers">Select Box1
    <ul>
        <li>1234</li>
        <li>5678</li>
        <li>0123</li>
    </ul>
</div>

$(".select ul li").click(function(e) {
    $(this).closest('div.select').text($(this).html());
    //alert($(this).closest('div.select').attr("id"))
    //alert($(this).closest('[id]').attr('id'))
    //alert($(this).closest('div.select').attr('id'))
});

好吧，我99%确信发生的事情是由于你分离了元素。您设置div.select的text（），它是您的select的父级。这实际上是删除了您小时候单击的li元素。所以以后当你尝试做一个最接近的动作时，它不会再返回任何东西，因为它不再是一个孩子了。在更改文本之前，您很可能需要存储这些信息，这样您就可以获得值，而无需事后查找。

$(".select ul li").click(function(e) {
    var $parent = $(this).closest('div.select');
    $parent.text($(this).html());
    alert($parent.attr('id'));
});
相关文章：