Невозможно изменить текст Span с помощью JQuery

Question

Я использую bootstrap и JQuery.

HTML

<div> 
    <ul> 
     <li><strong> Status : </strong><span id="monitorStatusSpan">1111</span></li> 
    </ul>   
</div> 

<button type="button" id="disableButton" 
        class="btn btn-primary" onclick="changeSpan();">Change</button> 

JavaScript

function changeSpan() { 
$('#monitorStatusSpan span').text('disssssssssssssssssss'); 
} 

Вот скрипка. http://jsfiddle.net/alamzeeshan/5bw8d2ta/7/

Но текст диапазона не меняется.

Кто-нибудь знает, что мне не хватает?

Answer 1

В настоящее время вы ищете span внутри #monitorStatusSpan (#monitorStatusSpan span) ,

function changeSpan() { 
    $('#monitorStatusSpan span').text('disssssssssssssssssss'); 
} 

Достаточно лишь взглянуть на ID, как это:

function changeSpan() { 
    $('#monitorStatusSpan').text('Your text here'); 
} 

Answer 2

HTML

<div> 
    <ul> 
     <li><strong> Status : </strong><span id="monitorStatusSpan">1111</span></li> 
    </ul>   
</div> 

<button id="disableMonitorButton" class="btn btn-primary">Change</button> 

JS

$("#disableMonitorButton").click(function() { 
    $('#monitorStatusSpan').html('disssssssssssssssssss'); 
}); 

PS. НЕ ДОПУСКАЙТЕ встроенный JS!

Answer 3

У вас неправильный селектор. Селектор, который вы использовали, находит элемент #monitorStatusSpan, а затем элемент span. которых нет.

Как идентификаторы уникальны, вы можете просто использовать селектор идентификатора для целевого требуемого элемента:

function changeSpan() { 
$('#monitorStatusSpan').text('disssssssssssssssssss'); 
} 

working demo

Answer 4

Попробуйте

function changeSpan() { 
 
$('#monitorStatusSpan').text('disssssssssssssssssss'); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <ul> 
 
     <li><strong> Status : </strong><span id="monitorStatusSpan">1111</span></li> 
 
    </ul>   
 
</div> 
 
<button type="button" id="disableButton" class="btn btn-primary" onclick="changeSpan();">Change</button>

Ваш текущий селектор выбирает все span «S внутри элемента с идентификатором #monitorStatusSpan, но в этом элементе нет span's.

Для вашего текущего HTML селектор должен выглядеть следующим образом

<span id="monitorStatusSpan"><span>TEST</span></span>