Question

当我点击id="nm"内的<ul>时，我想要div。这是html。

<div id="suggestionTags">
   <ul>
      <li class="nm">Commonwealth</li>
      <span class="cty"> x GB</span>
      <li class="hse">Commonwealth</li>
      <li class="yrs">1649-1653</li>
   </ul>
   <ul>
      <li class="nm">Oliver Cromwell</li>
      <span class="cty"> x GB</span>
      <li class="hse">Commonwealth</li>
      <li class="yrs">1653-1658</li>
   </ul>
   <ul>
      <li class="nm">Richard Cromwell</li>
      <span class="cty"> x GB</span>
      <li class="hse">Commonwealth</li>
      <li class="yrs">1658-1659</li>
   </ul>
   <ul>
      <li class="nm">Elizabeth II ((Head of the Commonwealth of Nations))</li>
      <span class="cty"> x GB</span>
      <li class="hse">House of Windsor</li>
      <li class="yrs">1952-</li>
   </ul>
</div>

这是javascript的一部分：

$("#suggestionTags").on('click',function(){
    alert( $(this).find("li.nm").text() );
});

这段代码给了我永远，而不仅仅是点击的id =“nm” 有人可以帮帮我吗？

修改：

进入http://jsfiddle.net/建议的解决方案工作。但是我仍然遇到问题。我会发布我的代码，这可能是问题所在。

    <script language="JavaScript">

     $(document).ready(function()

            {
//this is the code that does'nt work
            $('#suggestionTags ul').on('click', function() {
                alert($(this).find("li.nm").text());
            });
//end of part
                var o = [];
                $('#scrivo').keyup(function()
                {
                    if ($('#scrivo').val() <= 0) {
                        $('#suggestionTags').empty();
                        return;
                    }
                    var json = (function() {
                        var json = null;
                        $.ajax({
                            'async': false,
                            'global': false,
                            'url': "re.json",
                            'dataType': "json",
                            'success': function(data) {
                                json = data;
                            }
                        });
                        return json.Re;
                    })();
                    o = $.grep(json, function(n) {
                        return n.nm.indexOf($('#scrivo').val()) !== -1;
                    }, false);
                    $('#suggestionTags').empty();
                    var html = "";
                    $.each(o, function(index, value) {
                        html += '<ul>';
                        $.each(value, function(i, v) {
                            switch (i) {
                                case "nm":
                                    html += "<li class='nm'>" + v + "</li>";
                                    break;
                                case "cty":
                                    html += "<span class='cty'> x " + v + "</span>";
                                    break;
                                case "hse":
                                    html += "<li class='hse'>" + v + "</li>";
                                    break;
                                case "yrs":
                                    html += "<li class='yrs'>" + v + "</li>";
                                    break;
                            }
                            ;
                        });
                        html += "</ul>";


                    });
                    $('#suggestionTags').append(html);
                });

            });

        </script>

我解释了我的代码：代码检索了一个json文件而不是<input>过滤了var o以及keyup finction。过滤的对象数组显示在#suggestionTags <div>中。 json是这样的：

{
  "Re": 
[
  {
    "nm": "Edward the Elder",
    "cty": "GB",
    "hse": "House of Wessex",
    "yrs": "899-925"
  },
  {
    "nm": "Edgar",
    "cty": "GB",
    "hse": "House of Wessex",
    "yrs": "959-975"
  },
  {
    "nm": "Edward the Martyr",
    "cty": "GB",
    "hse": "House of Wessex",
    "yrs": "975-978"
  }
 ]
}

我知道为什么这段代码不能正常工作。但是，如果我改变这行代码

$('#suggestionTags ul').on('click', function() {
                alert($(this).find("li.nm").text());
            });

与此

$('#suggestionTags').on('click', function() {
                alert($(this).text());
            });

在警报弹出窗口中，我可以看到每个过滤的对象。但是我无法检索我点击的html部分。

Answer 1

我这样做：

$("#suggestionTags li").on('click', function () {
    alert($(this).closest('ul').find("li.nm").text());
});

<强> jsFiddle example

Answer 2

您只需要更改jQuery选择器：

Fiddle here

$("#suggestionTags ul").on('click',function(){
    alert( $(this).find("li.nm").text() );
});

Answer 3

对于我的问题，解决方案是：

    $('#suggestionTags').on('click','ul', function() {
        alert($(this).find('li.nm').text());
    });

我不明白为什么其他解决方案不能使用我的整个代码，但单独使用它们效果很好！？

如何返回单击的元素

3 个答案: