Question

当用户点击＆＃34; a＆＃34;时，我需要在sibling span元素和父div的名称中获取文本。元素将重复数百次。（在下面的示例中，我只包含两个，但您明白了。）请参阅下面的代码，请帮助我了解如何在标有注释的位置命名它们。 javascript和jQuery都可用于解决问题。

<html>
  <head>
    <script language="javascript" type="text/javascript" src="/wp-includes/js/jquery/jquery.js"></script>
  </head>

  <body>
    <div id="div001">
      <a href="javascript:{}" class="citation"><span class="book">Book 1</span> <span class="month">January</span></a>
    </div>
    <div id="output001"></div>

    <div id="div002">
      <a href="javascript:{}" class="citation"><span class="book">Book 2</span> <span class="month">February</span></a>
    </div>
    <div id="output002"></div>

    <script id="source" language="javascript" type="text/javascript">
      var $j = jQuery.noConflict();
      $j( ".citation" ).click(function ( )
      {
        event.preventDefault();

        var book = ???;     // <==== How do I capture “Book 1” or “Book 2”?
        var divName = ???;  // <==== How do I capture “div001” or “div002”?

        $j('#' + divName.replace('div', 'output')).html(book);
      }); 
    </script>

  </body>
</html>

Answer 1

这个问题可能有几十个答案，但这里只有其中一个：

 $j(document).on("click", ".citation", function ( ){
   var book = $(this).find('span.book').html();
   var divName = $(this).parent().attr('id');
 }

请注意，由于您的元素是动态创建的，因此您应使用.on()。

Answer 2

 var book = $(">span.book", this).html();
 var divName = $(this).closest("div").prop('id');

Answer 3

这是一个jsbin：http://jsbin.com/civizugene/1/edit?html,css,console,output

您可以使用jQuery find（）按类或类型查找元素。

如何使用javascript获取正确的DOM元素？

3 个答案: