CODEWITHSUNDEEP
javascriptjqueryhtmlcss
nayan chowdhury
nayan chowdhury

Reputation: 283

How to Get A Element First Child Text Using Jquery And Class Selector?

I Have Two Element Inside a Element. like below =>

<div class="NDateCount" style="display:inline-block">
     <!--Issue to solve-->
     <small style="display:none;" class="ng-binding">2017-07-08T12:44:10.367+06:00</small>
     <small ng-show="CountPostDate(post.timelineStrore.creationDate) < 2" style="color:#1ab394;" class="ng-binding"><i class="fa fa-clock-o"></i> 3 hours ago</small>
     <!--End of Issue to solve-->
</div>

i have this kind of div more than 10 time with is generating dynamically. and i want first child of div element which is small text; and i have done so far ==>

    var ReloadTime = function () {
        $('.NDateCount').each(function () {
            var OldValue = $(this).first().text();
            alert(OldValue);
         });
        setTimeout(ReloadTime, 50);
    }

but the above function giving something like both small tag innner text. like ==> result

is there ant way to solve this problem......

Upvotes: 0

Views: 2273

Answers (3)

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

var ReloadTime = function () {
        $('.NDateCount').each(function () {
            var OldValue = $(this).find('small').first().text();
            alert(OldValue);
         });
    }

setTimeout(ReloadTime, 50);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="NDateCount" style="display:inline-block">
     <!--Issue to solve-->
     <small style="display:none;" class="ng-binding">2017-07-08T12:44:10.367+06:00</small>
     <small ng-show="CountPostDate(post.timelineStrore.creationDate) < 2" style="color:#1ab394;" class="ng-binding"><i class="fa fa-clock-o"></i> 3 hours ago</small>
     <!--End of Issue to solve-->
</div>

First, the main mistake you are doing is that setTimeout() function is inside the ReloadTime() function. So the function is not called by setTimeout() unless you trigger that function once. So i disagree with the above answer. Secondly, the use of $(this) inside the each function reference to the individual $('.NDateCount') element so to achieve what you need, you first need to find the element <small> under $(this) and then get the first() element, and finally the text()

Upvotes: 0

Robin Mackenzie
Robin Mackenzie

Reputation: 19319

first() is returning the div element and therefore you get the text within it.

Get the children of $(this) and then use first():

var OldValue = $(this).children().first().text();


var ReloadTime = function() {
  $('.NDateCount').each(function() {
    var OldValue = $(this).children().first().text();
    alert(OldValue);
  });
  //setTimeout(ReloadTime, 50);
}

ReloadTime();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="NDateCount" style="display:inline-block">
  <!--Issue to solve-->
  <small style="display:none;" class="ng-binding">2017-07-08T12:44:10.367+06:00</small>
  <small ng-show="CountPostDate(post.timelineStrore.creationDate) < 2" style="color:#1ab394;" class="ng-binding"><i class="fa fa-clock-o"></i> 3 hours ago</small>
  <!--End of Issue to solve-->
</div>
<div class="NDateCount" style="display:inline-block">
  <!--Issue to solve-->
  <small style="display:none;" class="ng-binding">2017-07-08T12:44:10.367+06:00</small>
  <small ng-show="CountPostDate(post.timelineStrore.creationDate) < 2" style="color:#1ab394;" class="ng-binding"><i class="fa fa-clock-o"></i> 3 hours ago</small>
  <!--End of Issue to solve-->
</div>

Upvotes: 0

Bibhudatta Sahoo
Bibhudatta Sahoo

Reputation: 4894

Do like this

var ReloadTime = function () {
    $('.NDateCount').each(function () {
        var OldValue = $(this).find('small').eq(0).text();
        alert(OldValue);
     });
    setTimeout(ReloadTime, 50);
}

It will work for you.

Upvotes: 2

Related Questions