javascript - jQuery find previous button by ID (which will have different names) -
hey trying previous button can change text else once selects value select box.
<div class="input-group"> <div class="input-group-btn search-panel"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span id="search_concept">type</span> <span class="caret"></span> </button> <ul class="dropdown-menu" id="dd1" role="menu"> <li><a href="#" data-info="blah1">for sale</a></li> <li><a href="#" data-info="blah1">wanted</a></li> </ul> </div> <div class="input-group-btn search-panel"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span id="search_concept">location</span> <span class="caret"></span> </button> <ul class="dropdown-menu" id="dd2" role="menu"> <li><a href="#" data-info="somewhere">somewhere</a></li> <li><a href="#" data-info="elsewhere">elsewhere</a></li> </ul> </div> <input type="text" class="form-control" name="x" placeholder="search term..."> </div> $('.search-panel #dd1, .search-panel #dd2').find('a').click(function(e) { e.preventdefault(); var param = $(this).data("info"); $(this).prev().find('#search_concept').text($(this).text()); }); so click event starts this a href="#" data-info="blah1">[value here]< /a> tag. trying go < button> tag can change text type whatever selected.
i've tried:
$(this).prev().find('#search_concept').text($(this).text()); , $(this).prev().prev().find('#search_concept').text($(this).text()); , $(this).prev().prev().children().find('#search_concept').text($(this).text()); , $(this).prev().children().find('#search_concept').text($(this).text()); and can't seem find it....
fixed
$('.search-panel #dd1, .search-panel #dd2').find('a').click(function(e) { e.preventdefault(); var param = $(this).data("info"); $(this).parents('.search-panel').find('button').html($(this).text() + ' <span class="caret"></span>'); });
the following snippet uses jquery's .parents locate button.
$(this).parents(selector) find parent elements have specified selector.
then .find(selector) search parent element specified selector.
then can assign variable , use element.
$('.search-panel #dd1').find('a').click(function(e) { e.preventdefault(); var param = $(this).data("info"); var text = $(this).text(); // assign element variable later manipulation var $button = $(this).parents('.search-panel').find('button'); // eg: replace button text (replaces content including html) // $button.text(text) // eg: find element inside $button , replace text // $button.find('#search_concept').text(text) }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="input-group"> <div class="input-group-btn search-panel"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span id="search_concept">type</span> <span class="caret"></span> </button> <ul class="dropdown-menu" id="dd1" role="menu"> <li><a href="#" data-info="blah1">for sale</a></li> <li><a href="#" data-info="blah1">wanted</a></li> </ul> </div> <input type="text" class="form-control" name="x" placeholder="search term..."> </div>
Comments
Post a Comment