I have the following list
$(document).ready(function() {
$('li').click(function(e) {
alert($(e.target).children().remove().end().text());
alert($(e.target).siblings('span:first').text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<span>foo1</span>
<span style="visibility: hidden">bar1</span>
</li>
<li>
<span>foo2</span>
<span style="visibility: hidden">bar2</span>
</li>
<li>
<span>foo3</span>
<span style="visibility: hidden">bar3</span>
</li>
</ul>
I would like to extract "foo1" and "bar1" at the same time in different values. The function above looks really weird. Could someone find a better approach?
Could you adjust my jQuery function please?
You should try this code:
$(document).ready(function() {
$('li').click(function() {
console.log('span #1', this.children[0].innerHTML);
console.log('span #2', this.children[1].innerHTML);
});
});
You can use find('span:first').text() to get the texts with foo:
$(document).ready(function() {
$('li').click(function(e) {
console.log($(this).find('span:first').text());
});
});
I have the following list $(document).ready(function() { $('li').click(function(e) { alert($(e.currentTarget).text()); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<span>foo1</span>
<span style="visibility: hidden">bar1</span>
</li>
<li>
<span>foo2</span>
<span style="visibility: hidden">bar2</span>
</li>
<li>
<span>foo3</span>
<span style="visibility: hidden">bar3</span>
</li>
</ul>
Expand snippet I would like to get only the "foo".text() of each list element clicked. With my actual approach I also receice the "bar".text() unfortunately. Could you adjust my jQuery function please? javascript jquery target shareeditcloseflag asked
6 mins ago AppRoyale 1281217
You can read more about find() here and about text() here.
You need to find() the span, and then do the text() or html()
$(document).ready(function() {
$('li').click(function(e) {
alert($(e.currentTarget).find('span:last-child').text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<span>foo1</span>
<span style="visibility: hidden">bar1</span>
</li>
<li>
<span>foo2</span>
<span style="visibility: hidden">bar2</span>
</li>
<li>
<span>foo3</span>
<span style="visibility: hidden">bar3</span>
</li>
</ul>
Related
Here is my code and it's not selecting the value of the drop down list.
I tried many different ways but not working
<div class="container" style="height: 0;">
<ul class="psh__dpdw ">
<li class="button-dropdown">
<a class="dropdown-toggle">
something <!-- here should be desplayed the dropdown-menu list when i click -->
<img src="{{theme_url}}/assets/images/arrow-down.png" alt="arrow-down">
</a> {{ content:categories category_group_id="57" class="dropdown-menu" id=""}}
{{special}} {{ /content:categories }}
<!--<ul class="dropdown-menu">
<li>
Soemthing
</li>
</ul> -->
</li>
</ul>
</div>
<script>
$('.dropdown-menu li').find('a').change(function() {
var dropdown = $(this).closest('.dropdown-toggle');
var radioname = $(this).attr('name');
var checked = 'a[name=' + radioname + ']:checked';
//update the text
var checkedtext = $(checked).closest('.dropdown-menu li').text();
dropdown.find('a').text(checkedtext);
//retrieve the checked value, if needed in page
var thisvalue = dropdown.find(checked).val();
alert(thisvalue);
});
</script>**
The button where you click on the drop-down menu, I want to display the value on the button part. Also, I am using the CMS code so, any suggestion?
How can I solve this?
First you need to get container div using closest() and use find to get dropdown-toggle using find().
And also you have used wrong method for a tag, you need to use click instead of change like this
$('.dropdown-menu li a').click(function() {});
DEMO
$('.dropdown-menu li a').click(function() {
var dropdown = $(this).closest(".container").find('.dropdown-toggle');
dropdown.text($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" style="height: 0;">
<ul class="psh__dpdw ">
<li class="button-dropdown">
<a class="dropdown-toggle">
<img src="{{theme_url}}/assets/images/arrow-down.png" alt="arrow-down">
</a> {{ content:categories category_group_id="57" class="dropdown-menu" id=""}}
{{special}} {{ /content:categories }}
<br><br>
<ul class="dropdown-menu">
<li>
Prishtinë
</li>
<li>
Gjilan
</li>
<li>
Prizren
</li>
<li>
Pejë
</li>
<li>
Mitrovicë
</li>
<li>
Gjakovë
</li>
<li>
Ferizaj
</li>
</ul>
</li>
</ul>
</div>
I can see the hover() is working but it doesn't hide and show the contact_numbers class? What's wrong in my code?
$(function() {
$("#hdCallUs").hover(function() {
$(this).find('.contact_numbers').show();
console.log('in')
}, function() {
$(this).find('.contact_numbers').remove()
console.log('out')
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="hdCallUs">
<span class="glyphicon glyphicon-earphone"></span>
<span class="call_txt">Call Us Now</span>
<div class="contact_numbers">
<li>999</li>
<li>888</li>
</div>
</li>
because of wrong Dom structure in your html
<ul> is missing inside <div class="contact_numbers"> how can a <li> start without <ul>
and in your question you write
hide and show doesn't work with hover()? than why .remove() in your code
if you want to hide your element use .hide() see my code
$(function() {
$("#hdCallUs").hover(function() {
$(this).find('.contact_numbers').show();
console.log($(this).find('.contact_numbers'))
}, function() {
//$(this).find('.contact_numbers').remove() // this will remove element
$(this).find('.contact_numbers').hide() // this will hide
console.log('out')
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<ul>
<li id="hdCallUs">
<span class="glyphicon glyphicon-earphone"></span>
<span class="call_txt">Call Us Now</span>
<div class="contact_numbers">
<ul>
<li>999</li>
<li>888</li>
</ul>
</div>
</li>
</ul>
Your HTML is broken, you are missing <ul> tag. Try this code:
$(function() {
$("#hdCallUs").hover(function() {
$('.contact_numbers').show(); <!-- changed this -->
}, function() {
$('.contact_numbers').hide()
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="hdCallUs">
<span class="glyphicon glyphicon-earphone"></span>
<span class="call_txt">Call Us Now</span>
<div class="contact_numbers" style="display:none">
<ul> <!-- added this -->
<li>999</li>
<li>888</li>
</ul>
</div>
</li>
Seems like you are removing the element on hover out.
$(this).find('.contact_numbers').remove();
Is it expected? To hide element change this to:
$(this).find('.contact_numbers').hide();
I don't understand the structure of your html (li inside a div without ul?) but you can achieve this without javascript and just css like this:
.contact_numbers{
display: none;
}
#hdCallUs:hover .contact_numbers{
display: block;
}
That's because you have invalid html. You have to wrap your second level lis inside ul. li cannot have lis as its children and also, display:none; to your contact_numbers + do not remove it on hover out, instead just hide it. remove removes it permanently from DOM.
$(function() {
$("#hdCallUs").hover(function() {
$(this).find('.contact_numbers').show();
console.log('in')
}, function() {
$(this).find('.contact_numbers').hide()
console.log('out')
});
});
.contact_numbers{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="hdCallUs">
<span class="glyphicon glyphicon-earphone"></span>
<span class="call_txt">Call Us Now</span>
<div class="contact_numbers">
<ul>
<li>999</li>
<li>888</li>
</ul>
</div>
</li>
You have wrong html markup in your body which is rendered differently as compared to what you expect. Below is the rendered html:
<ul>
<li id="hdCallUs"> <span class="glyphicon glyphicon-earphone"></span>
<span class="call_txt">Call Us Now</span>
<div class="contact_numbers"></div>
</li>
<li>999</li>
<li>888</li>
</ul>
So clearly the .contact_numbers div doesn't have anything to hide and show and probably this is the reason why you are not getting expected results. Correct your html and then try.
You can check the rendered html in the console in this demo
Demo: http://jsfiddle.net/GCu2D/929/
Make sure you use .hide() and .show() or .toggle() as in this demo:
Demo with correct markup: http://jsfiddle.net/GCu2D/930/
JS:
$(function () {
$("#hdCallUs").hover(function () {
$(this).find('.contact_numbers').show();
console.log('in', $(this).find('.contact_numbers'))
}, function () {
$(this).find('.contact_numbers').hide()
console.log('out', $(this).find('.contact_numbers'))
});
});
HTML:
<ul>
<li id="hdCallUs"> <span class="glyphicon glyphicon-earphone"></span>
<span class="call_txt">Call Us Now</span>
<div class="contact_numbers">
<ul>
<li>999</li>
<li>888</li>
</ul>
</div>
</li>
</ul>
I'm trying to make a simple dropdown menu, this is my code so far:
HTML
<div id="menuBox">
<ul>
<li>
item 1
<ul class="subs" style="display: none;">
<li>
Sub 1
Sub 2
</li>
</ul>
</li>
<li>
item 1
<ul class="subs" style="display: none;">
<li>
Sub 1
Sub 2
</li>
</ul>
</li>
</ul>
</div>
JQUERY
jQuery(".activate").hover(function(){
jQuery(this).find('.subs').css("display", "block");
}, function(){
jQuery(this).find('.subs').css("display", "none");
});
When I try it on my site nothing happens, what am I doing wrong?
You currently have no elements with an .activate class because your HTML is messed up. Change:
item 1
To:
<a class="activate">item 1</a>
Once you've fixed that, you're still going to have problems as .subs isn't a descendant of .activate. You'll need to use jQuery's next() method to select the .subs element instead:
jQuery(".activate").hover(function(){
jQuery(this).next('.subs').css("display", "block");
}), function(){
jQuery(this).next('.subs').css("display", "none");
});
try
HTML
<div id="menuBox">
<ul>
<li>
item 1
<ul class="subs" style="display: none;">
<li>
Sub 1
Sub 2
</li>
</ul>
</li>
<li>
item 1
<ul class="subs" style="display: none;">
<li>
Sub 1
Sub 2
</li>
</ul>
</li>
</ul>
</div>
JS
jQuery(".activate").hover(function(){
jQuery(this).next('.subs').show();
}, function(){
jQuery(this).next('.subs').hide();
});
DEMO
item 1
Corrected above line as:
<p class="activate" style="cursor:pointer;">item 1</p>
i'm a beginner in jquery and i'm working on a menu.
This is my list in html document:
<ul>
<li>
<a class="entypo-menu" href="#"></a> <span class="menu">Menu ></span>
</li>
<li>
<a class="entypo-star" href="#"></a> <span>Favorite</span>
</li>
<li>
<a class="entypo-newspaper" href="#"></a> <span>About us</span>
</li>
<li>
<a class="entypo-location" href="#"></a> <span>Find us</span>
</li>
<li>
<a class="entypo-link" href="#"></a> <span>Share</span>
</li>
<li>
<a class="entypo-help-circled" href="#"></a> <span>FAQ's</span>
</li>
</ul>
and this is my js documment:
$(document).ready(function() {
$("span").hide();
$("li").click(function(){
$("li span").show(20);
});});
this js code is showing all the 'span' of my html.
how can i show the 'span' of the clicked 'li' ?
You need to use .find()
$("li").click(function(){
$(this).find("span").show(20);
})
like this
$("li").click(function(){
$(this).children("span").show(20);
});
Try like this:
$("li").click(function(){
$(this).children('span').show(20);
});
fiddle
Use children() then get 2nd children ,as 0th index ->1st child ,1st index -> 2nd child
$("li").click(function(){
$(this).children().eq(1).show(20);
})
Try this:
$("li").on("click", function () {
$('li span').hide();
$(this).find('span').show('20');
});
Ok guys, as promised, here is the real deal, first the sample html:
<li data-foo="bar">
<span id="a"></span>
<ul>
<li>
<span id="1"></span>
<ul>
<li>
<span id="b"></span>
</li>
</ul>
</li>
<li>
<span id="2"></span>
<ul>
<li>
<span id="c"></span>
</li>
</ul>
</li>
</ul>
</li>
<li data-foo="bar">
<span id="d"></span>
<ul>
<li>
<span id="3"></span>
<ul>
<li>
<span id="e"></span>
</li>
</ul>
</li>
<li>
<span id="4"></span>
<ul>
<li>
<span id="f"></span>
</li>
</ul>
</li>
</ul>
</li>
I want to get the window to pop up "12", then pop up "34"... so here is my nested functions attempt:
<script>
var poptext = "";
$('li[data-foo=bar]').each(
function () {
$(this li span).each(function () {
poptext = poptext + $(this).attr("id");
}
alert(poptext);
poptext = "";
);
}
);
</script>
This does not seem to be working, I think Jquery might got confused with multiple "this" keywords? Also there could be something wrong with the selector for those spans to begin with.
Thanks guys!
I think you are looking for the direct descendant selector: >
Used like this:
$('li[data-foo=bar]').each(function () {
var poptext = "";
$(this).find('> ul > li > span').each(function () {
poptext = poptext + $(this).attr("id");
});
alert(poptext);
});
Will only select the nodes that are direct children of the previous expression on the left hand side.
A more verbose, but maybe readable version could be:
$(this).children('ul').children('li').children('span') // selects the same
See it in action here: http://jsfiddle.net/xYgJg/
You have syntax errors in your code, $(this li span) should be $('li span', this) also your logic is off, you aren't filtering out the spans with the letter ids.