Question

看来我掌握jQuery语言的明显尝试让我失望。

我试图尝试获取UL LI选择框的DIV ID，但我的警报框返回＆＃34; undefined＆＃34;，因此我正在寻求专家帮助。

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

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

Answer 1

$(".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（），它是您选择的父级。这有效地删除了您作为孩子点击的li元素。因此，当你试图做到最接近时，它不会返回任何东西，因为它不再是孩子。在更改文本之前，您很可能需要存储该信息，这样您就可以获得该值，而无需事后查找。

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

Answer 2

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

获取所单击的UL LI选择框

2 个答案: