Question

我有下一个HTML。

我需要在onclick函数中获得'Jan'和'2017'的跨度文本内容。

我无法使用contains（'Jan'）或contains（'2017'），因为这些值可能会在运行时发生变化。

我尝试了下一次但没有成功。

div.relative {
  position: relative;
  top: 30px;
  right: 30px;
  bottom: 30px;
  left: 30px;
  border: 3px solid #73AD21;
}

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
   function ClockClicked(){
   var smonth=$("span.spanmonth").filter(function() { return ($(this).text()) });
   var syear=$("span.spanyear").filter(function() { return ($(this).text()) });
   alert(smonth+'-'+ syear);
};

 </script>
</head>
<body>
<div class="myclock">
     <div class="controls">
          <a class="pull-left">
            <div class="btn btn-primary" onclick="ClockClicked()">Click me</div>
          </a>
          <h4>
            <span  class="spanmonth" Jan></span> - <span class="spanyear" 2017></span> 
          </h4>
     </div>
</div>
</body>
</html>

HTML：

我使用过这个功能：

Answer 1

根据声明获取＆＃39; Jan＆＃39;的范围内容。和＆＃39; 2017＆＃39; 我假设HTML内容是

<span class="spanmonth" >Jan</span> - <span class="spanyear">2017</span>

您需要使用.text()。无需使用.filter()

var smonth=$("span.spanmonth").text();
var syear=$("span.spanyear").text();
alert(smonth+'-'+ syear);

我建议您使用不引人注目的事件处理程序 @Rory McCrossan 建议。

Answer 2

首先请注意您的HTML无效。 Jan和2017值应包含在span元素中，而不是设置为它的属性 - 它本身无效。

其次，对于现在过时的on*事件属性，使用不显眼的事件处理程序是一种更好的做法。在该事件处理程序中，您可以使用this关键字引用引发事件的元素并遍历DOM以查找所需的span。在这种情况下，closest()和find()会满足您的需求。试试这个：

＆＃13;

$('.myclock .btn').click(function() {
  var $clock = $(this).closest('.myclock');
  var month = $clock.find('.spanmonth').text();
  var year = $clock.find('.spanyear').text();

  console.log(month, year);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myclock">
  <div class="controls">
    <a class="pull-left">
      <div class="btn btn-primary">Click me</div>
    </a>
    <h4>
      <span  class="spanmonth">Jan</span> - <span class="spanyear" >2017</span>
    </h4>
  </div>
</div>

＆＃13;

Answer 3

注意：您的html无效，因为＆lt;之间有'Jan'。和＆gt;标记而不是跨度内的文本。

在任何情况下，您都可以尝试过滤器-contains'： $( "span.spanmonth").filter(":contains('2017')" );

https://api.jquery.com/contains-selector/

如何使用jquery选择跨度内容？

3 个答案: