jquery - 如何返回被点击的元素

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 功能。过滤后的对象数组显示在 #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