I have this HTML:
<ul>
<li class="selected">
..
</li>
<li>
..
</li>
<li>
..
</li>
</ul>
<div id="firstDiv"></div>
When the li a is clicked I want to set it's title as the content in #firstDiv. I'm a newbie in this and I need help.
Just take the title attribute from the item clicked $(this) using .attr('title') and place the text in the div using .html() or .text():
$('a.myClass').click(function(){
$('#firstDiv').html($(this).attr('title'));
});
The only reason to use e.preventDefauilt() is if the page can scroll down, as a # bookmark link will spring to the top:
$('a.myClass').click(function(e){
e.preventDefault();
$('#firstDiv').html($(this).attr('title'));
});
This is what I'd do:
$("a").click(function(e){
e.preventDefault();
$("#firstDiv").text($(this).attr("title"));
});
Here is the JSFiddle demo
Related
I'm trying to create a list in HTML where each item in the list can be clicked.But I need to know the ID of the item that was clicked.
I have been trying to have a div surround the list item and have an onClick and a ID tag associated. Then get the ID tag from the synthetic event.
But my list items are complex so they have sub DOM elements. Meaning if I click the <p> it will not return the ID associated with the div tag.
I'm not sure what the best would be to do this? strong text
Here are some solutions you can reference:
If using jQuery, try this api: ele.closest("div") to get the outer div tag
Study the javascript event popup and catch, after that you will get the answer
This question got very good answer here: JavaScript - onClick to get the ID of the clicked button
Orginally it demonstrates button click but you can use it for your li element (or any element) that you wish.
Good luck!
let li = $("li");
li.on("click", getId);
function getId(e) {
e.stopPropagation();
let id = $(this).attr("id");
console.log(id + " was clicked!");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li id="element_1">1. Click me</li>
<li id="element_2">2. Click me
<ul>
<li id="element_2.1">2.1. Click me</li>
<li id="element_2.2">2.2. Click me</li>
<li id="element_2.3">2.3. Click me</li>
</ul>
</li>
<li id="element_3">3. Click me</li>
<li id="element_4">4. Click me</li>
</ul>
I hope this helps and if i understood you question correctly
in your HTML you can try this
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
and in jquery try this
$(document).on("click", ".test", function (e) {
e.preventDefault();
alert($(this).attr("id"));
});
I want to create dropdown with country->region->city selection.
The first ul opens from click on that span and the others set to show on hover (code at the bottom).
<input type="text" id="srch-area" alt="" class="c-textfield suggestionsInput " name="locationStr" maxlength="" size="" tabindex="3" title="" value="Deutschland" defaultvalue="" highlight="y" strict="y" autocomplete="off">
<span class="c-icon-arrow-green-down-left c-icon" id="loc-slctbx"></span>
<ul class="dropdown-location-ul" id="dropdown-country" style="display:none;">
<li class="dropdown-location-li">
<strong>Deutschland</strong>
<ul class="dropdown-location-ul" style="display:none;">
<li class="dropdown-location-li">
<strong>Brandenburg</strong>
<ul class="dropdown-location-ul" style="display:none;">
<li class="dropdown-location-li">
<strong>Oranienburg</strong>
</li>
<li class="dropdown-location-li">
<strong>Schwedt</strong>
</li>
...
</ul>
</li>
<li class="dropdown-location-li">
<strong>Berlin</strong>
</li>
...
</ul>
</li>
<li class="dropdown-location-li">
<strong>France</strong>
</li>
...
</ul>
$('.dropdown-location-li').hover(function(){
$(this).children('ul').css('left', $(this).parent('ul').width()+'px');
$(this).children('ul').show();
}, function(){
$(this).children('ul').hide();
});
This works just fine and now i need to make it on click to change value of near input to the name of location inside strong tag. I tried the code below but it appears that $(this) selecting the element and all his parents, but i need to get location from only the one i clicked. Please tell me how to do that correctly? Maybe i have completely wrong approach to do this and need to make all with id's and stuff, but i just wanted to minimise the amout of repeating js.
$('.dropdown-location-li').click(function(){
$('#srch-area').val($(this).children('strong').text());
$('#dropdown-country').hide();
});
This is how it shows in console. AS you can see when i click on Oranienburg it selects Brandenburg and Deutschland as well which are the parents of the element i clicked.
console screenshot
You have nested .dropdown-location-li elements, so the click keeps propagating up to the other LI elements, firing the event handler again etc.
You should stop the propagation the first time
$('.dropdown-location-li').click(function(e){
e.stopPropagation();
$('#srch-area').val($(this).children('strong').text());
$('#dropdown-country').hide();
});
try to use JQuery Find
$(this).find('strong').text()
Trying to create a pseudo dropdown select, What I am trying to do is when a li is clicked, the content of <span></span> is replaced with the content of the clicked li
The problem is that its working only for the first click, not for the subsequent ones. What am I missing here.
Here is the unordered list
<div id="dd" class="language-selection" tabindex="1"><span>Language</span>
<ul class="dropdown">
<li>Profile</li>
<li>Settings</li>
<li>Log out</li>
</ul>
</div>
Here is the jQuery code :
jQuery('.language-selection ul li').click(function(){
var languageSelection = jQuery(this).text();
jQuery('.language-selection span').replaceWith(languageSelection);
});
replaceWith replaces the actual element with new contents passed as argument to this method,due to which it works for first time. afterwords no span element exist on first replacement.
Use .text() instead of replaceWith to set text to element.:
jQuery('.language-selection span').text(languageSelection);
Trying to open all links Target in new tab with target="_blank" of specific div <div class="widget-content"> on click by jquery/Js. Means when we click any links of div widget-content links will open in new tab on any browser.
HTML: JS Fiddle >
<div class="widget-content">
<ul>
<li> <b>1k</b></li>
<li> <b>3,200</b></li>
<li> <b>507</b></li>
<ul>
</div>
<div class="widget-content-2">
<ul>
<li> <b>1k</b></li>
<li> <b>3,200</b></li>
<li> <b>507</b></li>
<ul>
This function should work only in .widget-content not for .widget-content-2. I can do this by changing html, but trying to do this by Jquery/JS. Thanks.
Try utilizing selector $(".widget-content a") , e.preventDefault() , window.open()
$(".widget-content a").click(function(e) {
e.preventDefault();
window.open(this.href)
});
jsfiddle http://jsfiddle.net/zLs296Lu/2/
You just need to make all of links of div whose class is widget-content to open in a new page
JSFIDDLE updated
$('.widget-content a').click(function(e) {
e.preventDefault();
window.open($(this).attr('href'));
});
I'm currently working on making a timeline for a website page that displays the years and then when clicked it should open up and display what happened in those years and keep the other stuff from other years hidden. For some reason my jquery is doing the opposite it keeps what i click on and hides every other year and their data.
Here is my HTML
<div class="timeline">
<ul>
<li class="timeli">1996
<ul class="timeUlSub">
<li>
<div class="arrow-up"></div>
<p class="timeline-description">test</p>
</li>
<li>
<div class="arrow-up"></div>
<p class="timeline-description">test</p>
</li>
</ul>
</li>
<li class="timeli">1997
<ul class="timeUlSub">
<li>
<div class="arrow-up"></div>
<p class="timeline-description">Test</p>
</li>
</ul>
</li>
<li class="timeli">1999
<ul class="timeUlSub">
<li>
<div class="arrow-up"></div>
<p class="timeline-description">test</p>
</li>
</ul>
</li>
</ul>
</div>
Here is my jquery I guess my problem is that i dont fully understand the .sibling in jquery.
$(document).ready(function(){
$(".timeli").click(function(){
$(this).siblings($(".timeUlSub")).slideToggle("slow", function(){});
});
});
HERE IS THE EDIT FOR ANSWER it works perfectly for me thanks for the help!
$(document).ready(function(){
$(".timeli").click(function(){
$(this).find($(".timeUlSub")).slideToggle("slow", function(){});
});});
timeUlSub is the child of timeli, and not sibling (same-level elements). Use find() or children()
$(this).find(".timeUlSub").slideToggle("slow", function(){});
or
$(this).children(".timeUlSub").slideToggle("slow", function(){});
Note : children() searches for first-level children only, find() searches children, grand-children and so on.
.timeUlSub is child of clicked li element. thus you need to use .find() instead of .siblings().You also do not need the jquery object, you can simply use the selector for required element:
$(this).find(".timeUlSub").slideToggle("slow", function(){});
Complete Click Event:
$(".timeli").click(function(){
$(this).find(".timeUlSub").slideToggle("slow", function(){});
});
I believe you want to hide the child ul of the other elements, but also show those of the one that has been clicked...
$(document).ready(function () {
$(".timeli").click(function () {
$(this).siblings().find(".timeUlSub").hide("slow");
$(".timeUlSub", this).show("slow");
});
});
This behaviour is "open the one I click and hide the rest".
If you want "toggle the one I click", you don't need to worry about siblings at all.
$(".timeUlSub", this).slideToggle("slow");
See it in action on JSFiddle, or the second version.
.timeUlSub is not a sibling, rather a child element of .timeli.
You should refactor your code to:
$(".timeli").click(function(){
$(this).find(".timeUlSub").slideToggle("slow", function(){});
});
And an even better implementation would be to delegate the click:
$(document).on("click", ".timeli", function(){
$(this).find(".timeUlSub").slideToggle("slow", function(){});
});