Найти кнопку ввода в выбранном классе div

Question

Как я могу использовать jquery, чтобы найти эту кнопку в div с именем класса "blueheaderbar accordionButton on", а затем изменить значение кнопки, чтобы "скрыть это"

<div class="blueheaderbar accordionButton selected" style="margin-top:20px">
            <div class="floatleft">abc</div>
            <div class="floatright"><input class="showhidebtn" type="button" value="Show Outlet" style="margin:6px 16px 0 0; width:86px" /></div>
            <div class="clear"></div>
</div>

<div class="blueheaderbar accordionButton" style="margin-top:20px">
            <div class="floatleft">abc</div>
            <div class="floatright"><input class="showhidebtn" type="button" value="Show Outlet" style="margin:6px 16px 0 0; width:86px" /></div>
            <div class="clear"></div>
</div>

Answer 1

Я думаю, что ответ:

$("div.blueheaderbar.selected").find("input").val("hide it");

Answer 2

это сделает трюк -

jQuery(".blueheaderbar.accordionButton.selected").find(".showhidebtn").hide();

и для второго div попробуйте это -

jQuery(".blueheaderbar.accordionButton").find(".showhidebtn").hide();

, вы также можете попробовать таким же образом -

jQuery(".blueheaderbar.accordionButton.selected > .showhidebtn").hide();

Рабочая демоверсия

Answer 3

"blueheaderbar accordionButton selected" не "одно" имя класса, а три.CSS-селектор для выбора элемента со всеми тремя классами:

.blueheaderbar.accordionButton.selected

(обратите внимание на отсутствие пробелов!).

Поэтому найти вход внутри там с помощью jQuery:

var $input = jQuery(".blueheaderbar.accordionButton.selected input");

или

var $input = jQuery(".blueheaderbar.accordionButton.selected").find("input");

Answer 4

Это должно изменить текст

$('.showhidebtn').click(function() {
  $(this).val('hide it');
});