CODEWITHSUNDEEP
javascriptjqueryhtml
Luiz Alves
Luiz Alves

Reputation: 2645

How do I select a span content, using jquery?

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:

Upvotes: 0

Views: 1913

Answers (3)

Satpal
Satpal

Reputation: 133403

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.

Upvotes: 2

Inspiraller
Inspiraller

Reputation: 3806

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/

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337570

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>

Upvotes: 2

Related Questions