How do I select a span content, using jquery?

Question

I have the next html.

I need to get a span text content of 'Jan' and '2017' in a onclick function.

I can´t use contains('Jan') or contains('2017') because that values can change at runtime.

I tried the next but no success.

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:

I have used this function:

Is this normal that "Jan" and "2017" are not between the > and < of the span ? if yes you should use data-month="Jan" and data-year="2017" then get it with the .data() function of jquery — Dipiks, Jan 04 '17 at 13:40
I am using responsive calendar from http://w3widgets.com/responsive-calendar/. The document says to use:

. I only did changes to my needs. I add onclick and a class to my needs. No other changes. — Luiz Alves, Jan 04 '17 at 14:14
Please don't deface your post by rolling back our improvements. — FelixSFD, Jan 04 '17 at 14:39

Satpal · Accepted Answer · 2017-01-04T13:54:14.780

2

As per statement get a span text content of 'Jan' and '2017' I am assuming HTML content is

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

You need to use .text(). No need of using .filter()

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

I would recommend you to use unobtrusive event handler as @Rory McCrossan suggested.

edited Jan 04 '17 at 13:54

answered Jan 04 '17 at 13:40

Satpal

132,252
13
159
168

I am using responsive calendar from http://w3widgets.com/responsive-calendar/. I am using the span copied from the documentation – Luiz Alves Jan 04 '17 at 14:21

score 2 · Answer 2 · answered Jan 04 '17 at 13:42

2

Firstly note that your HTML is invalid. The Jan and 2017 values should be wrapped in the span elements, not set as attributes of it - which itself is invalid.

Secondly it's better practice to use an unobtrusive event handler over the now outdated on* event attributes. Within that event handler you can use the this keyword to reference the element that raised the event and traverse the DOM to find the span you require. In this case, closest() and find() would suit your needs. Try this:

$('.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);
});

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

answered Jan 04 '17 at 13:42

Rory McCrossan

331,213
40
305
339

Can you provide a link to documentation re `it's better practice to use an unobtrusive event handler over the now outdated on*` as I am interested to learn the background. – Vanquished Wombat Jan 04 '17 at 13:45
1

@VanquishedWombat I can't find anything canonical at the moment, but here's a couple of references: http://stackoverflow.com/questions/6888651/javascript-events-best-practice & https://www.smashingmagazine.com/2008/09/jquery-examples-and-best-practices/ – Rory McCrossan Jan 04 '17 at 13:54
I am using responsive calendar from http://w3widgets.com/responsive-calendar/. See my other comment above – Luiz Alves Jan 04 '17 at 14:14
1

@RoryMcCrossan Thanks for that - I concur your point. I infact misread your reference to `on*` as meaning the jquery `$selector.on(eventname, function(){...})` approach was deprecated. For anyone new to jquery the smashingmagazine.com article is a good introduction to approach and style. – Vanquished Wombat Jan 04 '17 at 14:35

score 0 · Answer 3 · answered Jan 04 '17 at 13:45

0

Note: Your html is invalid as you have 'Jan' between the < and > tag instead of text within the span.

In any case, you can try the filter -contains': $( "span.spanmonth").filter(":contains('2017')" );

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

answered Jan 04 '17 at 13:45

Steve Tomlin

3,391
3
31
63

I am using responsive calendar from http://w3widgets.com/responsive-calendar/. See my other comment above – Luiz Alves Jan 04 '17 at 14:15
I can't use contains as explained above in uq question – Luiz Alves Jan 04 '17 at 14:26

How do I select a span content, using jquery?

3 Answers3