here the html code, and i want to get the id of next element from clicked element a with class coba or to get id of element table class coba2.
<div class="dropdown">
<label>Kategori</label>
<button class="btn btn-default dropdown-toggle" type="button" id="jenis_kues" data-toggle="dropdown">Tambah Pertanyaan
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="jenis_kues">
<li role="presentation">
<a class="coba" id="teks" role="menuitem" tabindex="-1" href="#" onclick="tambah_kues_teks()">Teks</a>
</li>
</ul>
</div>
<table class="coba2" id="kues_teks-'+i+'">
</table></div>
and i've tried using this script
var a = $('.coba').next('.coba2'); alert(a.attr('id'));
but it show me undefined, anyone know how?
You need to travel up the DOM tree, until you are on the same level as .coba2:
var id = $('.coba').closest('.dropdown').next('.coba2').attr('id');
alert( id );
you should use
var a = $('.coba').parents('.dropdown').next('.coba2'); alert(a.attr('id'));
Related
I want to click this button and choose what i want the date selection.
My Document:
<div class="input-group-btn open">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">選取
<span class="caret"></span>
</button>
<ul id="mnuShowingDate" class="dropdown-menu pull-right">
<li>2017/07/29 (週六)</li>
<li>2017/07/30 (週日)
</li><li>2017/07/31 (週一)</li>
<li>2017/08/01 (週二)</li>
<li>2017/08/02 (週三)</li>
<li>2017/08/03 (週四)
</li>
</ul>
</div>
I only know use the click function like this:
casper.then(function () {
this.click('button.btn.btn-danger.dropdown-toggle');
});
It works , but i want to click the second li which is 2017/07/30 now.
How can i select it ? Any ideas? Thanks in advance.
Not sure I've formulated my question well, hope the details will cover the issues.
So, I'm building an "artificial" full-height slide-like submenu, and I have an empty container there:
<section class="masking_sublevel">
</section>
Further, I have a bunch of ul elements in my HTML that are hidden by default in their containing section:
I'm updating the HTML part with a more complete piece:
<div id="sldbr_overlay" class="newully">
<section class="masking_sublevel">
</section>
<ul class="sidebar_bumenu">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Beauty <i class="fa fa-chevron-right bu_chevright"></i>
<i class="fa fa-chevron-down bu_chevdown"></i>
</a>
<section class="hidden_ul">
<ul>
<li>Aerobics</li>
<li>Pilates</li>
<li>Yoga</li>
<li>Massage</li>
<li>Peeling</li>
<li>Bikini Area Sugaring</li>
<li>Piercing</li>
<li>Tattoo</li>
<li>Shaping</li>
<li>Sauna</li>
<li>Mud SPA</li>
<li>Needle Therapy</li>
<li>Shaping</li>
<li>Leech Therapy</li>
<li>Thai Massage</li>
<li>Wushu</li>
</ul>
</section>
</li>
<li>Clothing</li>
<li>Computers</li>
<li>Construction</li>
<li>Entertainment</li>
<li>Financial</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Food <i class="fa fa-chevron-right bu_chevright"></i>
<i class="fa fa-chevron-down bu_chevdown"></i>
</a>
<ul class="hidden_ul">
<li>Pizza</li>
<li>Cheboorackee</li>
<li>Khash</li>
<li>Pork</li>
<li>Hamburgers</li>
<li>Greek Salad</li>
<li>BBQ</li>
<li>Tortillas</li>
<li>Spaghetti</li>
<li>Pasta</li>
<li>Ice Cream</li>
<li>Jelly Sugar</li>
<li>Lolly Pop</li>
<li>Cupcakes</li>
</ul>
</li>
<li>Health</li>
<li>Kids</li>
<li>Services</li>
<li>Travel</li>
<li>Tourism</li>
</ul>
<div class="pzik">
<a href="javascript:void(0);" data-toggle=".sidebar_wrapper" id="sidebar-toggle_abs">
<img src="svg/filter.svg" class="filter_icon hvr-wobble-bottom">
</a>
<a href="javascript:void(0);" id="go-2-top" class="gotop_chevron">
<i class="fa fa-chevron-up"></i>
</a>
</div>
</div>
So, what I'm doing is selecting the above mentioned ul and put it within the empty section on a hover event and emptying it on a mouseleave, like this:
$(document).ready(function(){
var dropdownLi = $('li.dropdown');
var maskingSubLvl = $('.masking_sublevel');
var importedUl = $('.masking_sublevel ul');
var hiddenUl = $('.hidden_ul ul');
$(dropdownLi).on('mouseover',function(){
$(hiddenUl).appendTo(maskingSubLvl);
$(maskingSubLvl).css('display','block');
});
$(dropdownLi).on('mouseleave',function(){
$(maskingSubLvl).css('display','none');
$(importedUl).empty();
$(maskingSubLvl).on('mouseenter',function(){
$(this).css('display', 'block');
});
});
});
The problem is that with this piece of code I probably select just the first ul with the class of .hidden_ul', since as I hover on the other items (randomly), it keeps on loading the content of the first list. How can I select the VERY ul element with the same class that I'm currently hovering?
Thanks!
So you want to traverse from the element that has mouseover to the parent ul, which is a child of the grand-parent .hidden_ul
// remove this, it has no context to each drop down
// var hiddenUl = $('.hidden_ul ul');
$(dropdownLi).on('mouseover',function(){
$(this).closest('.hidden_ul').children('ul').appendTo(maskingSubLvl);
// though if there are no child uls in your lis, this will do
$(this).closest('ul').appendTo(maskingSubLvl);
Since your hidden_ul is direct child of .dropdown you need to get it using its parent context as below:
$(dropdownLi).on('mouseover',function(){
var hiddenUl=$(this).find('.hidden_ul')[0];//find the child
$(hiddenUl).appendTo(maskingSubLvl);
$(maskingSubLvl).css('display','block');
});
Update
Instead of appendTo try keeping changing the html of .maskingSubLvl so that no need to remove the content again before appending another. For Ex:
DEMO
$(document).ready(function(){
var dropdownLi = $('li.dropdown');
var maskingSubLvl = $('.masking_sublevel');
var importedUl = $('.masking_sublevel ul');
$(dropdownLi).on('mouseover',function(){
$(maskingSubLvl).css('display','block');
var hiddenUl = $(this).find('.hidden_ul ul').clone(); //clone the content
$(maskingSubLvl).html(hiddenUl);
});
$(dropdownLi).on('mouseleave',function(){
$(maskingSubLvl).css('display','none');
});
$(maskingSubLvl).on('mouseenter',function(){
$(this).css('display', 'block');
});
});
I am trying to open a dropdown on hover in Bootstrap but somehow it's not working. I suspect that my jQuery code is wrong but I can't figure out what?
Here is my HTML:
<a href="#" id="dropdown-filter" data-target="#" data-toggle="dropdown">
<button type="button" class="btn btn-primary">Filters</button>
</a>
<ul class="dropdown-menu pull-right" role="menu">
<li>
<div class="results-filter">
Content goes here
</div>
</li>
</ul>
and my jQuery:
jQuery('#dropdown-filter').hover(function() {
jQuery(this).find('.dropdown-menu').stop(true, true).delay(100).fadeIn();
}, function() {
jQuery(this).find('.dropdown-menu').stop(true, true).delay(100).fadeOut();
});
It works when I click on top, but not when I hover.
jQuery(this).find('.dropdown-menu') won't work here as .dropdown-menu is not a child of <a>-#dropdown-filter.
.find() searches for children.
Use jQuery(this).next('.dropdown-menu')...
For some reason I'm having trouble in selecting an element above another element. I would like to select the nearest .discount-dropdown class that sits aboove the .discount-type class. What am I doing wrong?
HTML (multiple of these):
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle discount-dropdown" data-toggle="dropdown" aria-expanded="false">$ <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right adjustment-dropdown" role="menu">
<li><a class="discount-type">$</a></li>
<li><a class="discount-type">%</a></li>
</ul>
</div>
jQuery:
$('.discount-type').on('click', function(event){
$sign = $(this).html().substr(0,1);
$parentElement = $(this).closest('.discount-dropdown').html(); //this isn't working
$newHtml = $sign + $parentElement.substr(1);
alert($newHtml);
});
because button is not a parent of li
$('.discount-type').on('click', function(event){
$sign = $(this).html().substr(0,1);
$parentElement = $(this).closest('ul').prev('.discount-dropdown').html(); //this isn't working
$newHtml = $sign + $parentElement.substr(1);
alert($newHtml);
});
I would suggest some changes in the way in which you are updating the currency like
$('.discount-type').on('click', function(event) {
var sign = $(this).html().substr(0, 1);
$(this).closest('ul').prev('.discount-dropdown').find('.currency').text(sign)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle discount-dropdown" data-toggle="dropdown" aria-expanded="false"><span class="currency">$</span> <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right adjustment-dropdown" role="menu">
<li><a class="discount-type">$</a></li>
<li><a class="discount-type">%</a></li>
</ul>
</div>
Closest function will search for closest parent with given criteria, your button is not any parent of your element. So using closest can be used to find parent for both your elements - discount-type and your button. Having handler to your parent, you can find your button.
$buttonElement = $(this).closest('.input-group-btn').find('.discount-dropdown').html();
input-group-btn - is parent for both elements
discount-dropdown is a child element for input-group-btn
Try this
$('.discount-type').on('click', function(event){
$sign = $(this).html().substr(0,1);
$parentElement = $(this).parent().parent().parent().find('.discount-dropdown').html(); //this is working fine
$newHtml = $sign + $parentElement.substr(1);
alert($newHtml);
});
Working Demo
use closest('ul') instead of closest('.discount-dropdown').
You could also use parentsUntil+parent
$(this).parentsUntil('.discount-dropdown').parent().html();
Been working with this dropdown:
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
company
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>google</li>
<li>apple</li>
<li>microsoft</li>
<li>facebook</li>
<li>adobe</li>
<li class="divider"></li>
<li>other</li>
</ul>
</div>
When someone clicks one of the options, I want to update the "company" text to the selected option. I was able to do this using $('#company').text('update goes here'); however using this destroys the placed next to the dropdown text. Any guidance on this one? Thanks!
Just wrap your text in a span :
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span id="cie">company</span>
<span class="caret"></span>
</button>
Then update the text of the span:
$('#cie').html('your text');
you should .append the value and not .text like this:
$('#company').append(new value);
or you can append it to the span
$('#company span').append(new value);
Add this to your JavaScript code:
$(function(){
$(".dropdown-menu li a").click(function(){
$(".btn:first-child").text($(this).text());
$(".btn:first-child").val($(this).text());
});
});
See this fiddle.
If you are using jquery, you should be able to use the .html() to assign the value of the text of the button.
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span id="company-name">company</span><span class="caret"></span></button>
<ul class="dropdown-menu">
<li>google</li>
<li>apple</li>
<li>microsoft</li>
<li>facebook</li>
<li>adobe</li>
<li class="divider"></li>
<li>other</li>
</ul>
</div>
Added an ID to the button, and then reference it using jquery:
$("#company-name").html("company-name-here");
with company name selected as the parameter.
In case you cannot wrap the text with an element,
Demo
function getChildText(node) {
var text = "";
for (var child = node.firstChild; !! child; child = child.nextSibling) {
if (child.nodeType === 3) {
text += child.nodeValue;
}
}
return text;
}
$(".btn-primary").click(function () {
$(this).html($(this).html().replace(getChildText(this).trim(), "New Value"));
});