CODEWITHSUNDEEP
jquery
FoadJesus
FoadJesus

Reputation: 27

find an element inside an sibling of another element with jquery

<div class="container">
    <input type="button" value="play" class="btnplay"></input>
    <audio class="song">
        <source src="<%# Eval("f_audio") %>" />
    </audio>
    <div class="progress-show">
        <span class=".currTime">dsgbadgnsetb</span>
        <input class="progress-slider mdl-slider mdl-js-slider" type="range" min="0" max="100" value="0" tabindex="0">
        <span class=".totalTime">sfhsg s</span>
        <input class="volume-slider mdl-slider mdl-js-slider" type="range" min="0" max="100" value="50" tabindex="0">
    </div>
</div>

I want to find the span tag with the class of currTime and change it's value but through the btnplay like this:

$('.btnplay').click(function () {
    $(this).siblings('.progress-show').next('.currTime').text('111111');
});

but it doesn't work, what is the correct syntax?

Upvotes: 1

Views: 2797

Answers (3)

Abhi
Abhi

Reputation: 4261

.next() will fetch you <audio> element. You must try finding the element like:

jQuery(".btnplay").click(function() {
    jQuery(this).siblings(".progress-show").find(".currTime").text("Some Text");
});

Documentation for jQuery.next() and jQuery.find()

Upvotes: 0

Satpal
Satpal

Reputation: 133453

Change your HTML and rename CSS class as currTime instead of .currTime otherwise you need to escape . as its a metacharacter

HTML change

<span class="currTime">dsgbadgnsetb</span>

Then use, children() should be used to get child element.

$('.btnplay').click(function () {
    $(this).siblings('.progress-show').children('.currTime').text('111111');
});

Using existing HTML, Escape meta-character . using \\ 

$('.btnplay').click(function () {
    $(this).siblings('.progress-show').children('.\\.currTime').text('111111');
});

Upvotes: 1

Milind Anantwar
Milind Anantwar

Reputation: 82251

Use .find() instead of .next() as .currTime is child element and not next sibling of .progress-show:

$('.btnplay').click(function () {
    $(this).siblings('.progress-show').find('.currTime').text('111111');
});

Upvotes: 2

Related Questions