<ul>
<li class="first">Modify search
</li>
<li>For <span>Select</span><span style="float:right; padding-right:10px;">▼</span>
<ul> <span>Girlfriend</span> <span>Boyfriend</span> <span>Husband</span> <span>Wife</span>
<span class="cl"></span> <span>Mother</span> <span>Father</span> <span>Daughter</span> <span>Son</span>
<span class="cl"></span> <span>Friend (M)</span> <span>Friend (F)</span> <span>Colleague (M)</span> <span>Colleague (F)</span>
<span class="cl"></span> <span>Nephew</span> <span>Niece</span> <span>Aunt</span> <span>Uncle</span>
<span class="cl"></span>
</ul>
</li>
</ul>
What i am trying to do is whenever i select any value it must be highlighted and it should be shown in the filter.
For example if i select girlfriend the For : select should look like For : girlfriend
Let me guess that the 'Select' text has the id 'select_id';
$('ul span').click(function(){
$("#select_id").html($(this).html);
});
$('a').click(function(){
var clicked_link = $(this).text() // will get the text
$(this).attr('some_attr') // will get the value of an attribute in the clicked a tag
alert(clicked_link);
})
add an id to span <span id="this">Select</span>
then getElementByI("this").innerHTML = set to something you want
do it like this
$(function(){
$("a").click(function() {
alert("look like for : "+$(this).text());// OR show this value in any particular DIV
$(".displayDiv").text("look like for : "+$(this).text());
});
});
You should have only li inside a ul and not spans. Others are not permitted.
However, the answer you are perhaps looking for is :
$('ul li ul span').click(function(){
$('ul li span').eq(2).text($(this).text());
}
And all this surely begs for the use of a class or id.
Add id attribute getval to span where you want to display selected item.
<span id="getval" style="float:right; padding-right:10px;">▼</span>
JQuery
Get the text of anchor and then set it to where you want to display.
$(document).ready(function(){
$("ul span a").click(function(){
$("#getval").text($(this).text());
});
});
It is easier if you can assign ID to the elements...
for example:
<a href="#">For <span id="select">Select</span>...
and also to the second ul:
<ul id="list">...
then you need something like that:
$('#list a').on('click', function() {
var text = $(this).text(); //this take the text of the clicked text.
$('#select').empty().text(text); //this assign the value.
});
Related
Need some help with jQuery DOM.
I need to extract the content of the id. I have a list that user can select and it will filter the hotspot of the map. After user select, I want filtertitle to display the new selected filter. I can apply the "id" to the filter title but not sure about the content because the content has Shopping / Dining. Someone please.
HTML
<div class="map-filter">
<div class="filtertitle">All Categories</div>
<ul class="filter-list">
<li class="active" id="All Categories">All Categories</li>
<li id="Shopping">Shopping/Dining</li>
<li id="Hotel">Hotels & Resorts</li>
<li id="Art">Art Galleries</li>
</ul>
</div>
jQuery
$('.filter-list li').click(function(){
var id = $(this).attr('id');
$(this).siblings().removeClass('active');
$(this).addClass('active');
$('.filtertitle').html(id); //This part is where I set the id
});
Use .text(), it gives you the text content of the desired element.
$('.filtertitle').html($(this).text());
In case of html content use .html().
$('.filtertitle').html($(this).html());
If I'm understanding what you're asking correctly then you can try something like this.
$('.filter-list li').click(function(e){
$(this).siblings().removeClass('active');
$(this).addClass('active');
$('.filtertitle').html($(e.currentTarget).text());
});
JSFiddle - https://jsfiddle.net/583zgs57/
Instead of simple setting id, you can use $(this).text(); to fetch the text content of current element.
$('.filter-list li').click(function(){
var id = $(this).attr('id');
$(this).siblings().removeClass('active');
$(this).addClass('active');
$('.filtertitle').html($(this).text());
});
as stated in the name, i have a menu with links, and i have a list of sections which i want to show/hide on the click of the menu.
What i want here is to be dynamic in a sense that if i add more menus and sections I don't have to change the code that does it, or to add new tags or names.
I tried doing something myself but I'm probably missing something..
Any assistance would be appriciated
I have a simple example on this jfiddle: https://jsfiddle.net/s07ysx6w/6/
HTML:
<div id="header">
<div id="menuBlock">
<ul id="menu">
<li>Novosti</li>
<li>Program Mladi</li>
<li>Program Odrasli</li>
<li>Program Upisi</li>
<li>Galerija</li>
<li>Kontakt</li>
</ul>
</div>
</div>
<body>
<div id="main">
<div id="novosti" name="sekcija1" class="sekcija">
aaaa
</div>
<div id="programMladi" name="sekcija2" class="sekcija">
aaaa
</div>
<div id="programOdrasli" name="sekcija3" class="sekcija">
aaaa
</div>
<div id="programUpisi" name="sekcija4" class="sekcija">
aaa
</div>
<div id="galerija" name="sekcija5" class="sekcija">
aaaa
</div>
<div id="kontakt" name="sekcija6" class="sekcija">
aaa
</div>
</div>
</body>
Javascript:
$(document).ready(function() {
$("#menu").click(function(e) {
var selected = this.attr('href');
$('#main' + selected).show('slow').siblings().hide('slow');
});
});
EDITED:
Copy/pasting made me careless so now there are only unique id's. Also replaced the fiddle with a working one (solution).
UPDATE:
In case anyone uses slicknav as a plugin on his/her's page, to get to the element you have in your menu you need to find how exactly slicknav injected it into your page. For instance, in my case, since i prepend it to my #menuBlock div tag. In order to find the element #novosti i had to dig in deep, since slicknav creates tags on its own in order to work the way it does.
In that case my javascript looked like this.
$(document).ready(function(){
$("#menuBlock div ul li a").click(function (e){
e.preventDefault();
var selected = $(this).attr('href');
$( selected ).fadeIn('slow').siblings().hide();
});
});
There should a space between 2 selectors if they have a parent child relationship, so change this line
$('#main' + selected).show('slow').siblings().hide('slow');
to
$('#main ' + selected).show('slow').siblings().hide('slow');
or simply the selected one (since it is already pointing to a specific element)
$(selected).show('slow').siblings().hide('slow');
check this updated fiddle
$(document).ready(function(){
$("#menu li a").click(function (e){ //bind the event on `a` rather than ul
var selected = $(this).attr('href'); //use $(this) instead of this
$( selected ).show('slow').siblings().hide('slow'); //explained above
});
});
There are more than one errors found in your code,
set a Jquery library
Id should be unique throughout the DOM
Replace this.attr with $(this).attr()
Descendant selector would be #menu #something not #menu#something
Should .stop() an animation before beginning the new one.
Try,
$(document).ready(function() {
$("#menu li a").click(function(e) {
e.preventDefault()
var selected = $(this).attr('href');
$('#main ' + selected).stop().show('slow').siblings().hide('slow');
});
});
DEMO
Try this method
$(document).ready(function() {
$("#menu a").click(function(e) {
debugger;
var selected = $(this).attr('name');
$('#main div').hide();
$('#main div[name="'+selected+'"]').show('slow');
});
});
You are not supposed to have more than one element with the same ID on a page, so change the id on the page to something more specific. Or I'm I mistaken? From your question, you wanted something more extensible, here is an approach
$(document).ready(function(){
$("#menu").click(function (e){
var element = $(e.target).attr('href');
$('#main-divs > ' + element).show('slow').siblings().hide('slow');
});
});
I have this JSFiddle. I have a ul list and some li inside. I want pressind a button to toggle the 2 first li. I tried to put <li class="s1"> and then
$( "button" ).click(function() {
$("ul.s1").click(function() {
$(this).slideToggle(300);
return false;
});
});
<button>button</button>
<ul>
<li class="s1">1</li>
<li class="s1">1</li>
<li>9023698</li>
<li>8993127</li>
<li>9037891</li>
</ul>
but nothing happens..
Firstly, you don't need to give the li their own click event if you want them to slide on click of the button. Secondly, the selector for the li elements is incorrect. Thirdly the jsFiddle you setup didn't include jQuery. Try this:
$("button").click(function () {
$("ul .s1").slideToggle(300);
});
Example fiddle
$( "button" ).click(function() {
$("ul .s1").slideToggle(300);
return false;
});
A space between ul and class should fix it.
And you don't need the click handler for list element.
I am creating these dynamic span with dynamic button i want to remove respective span when their button clicked
Example:if someone click on button with id 1 then span of id 1 gets removed using jquery
(removed not hide)
<span id="1">text</span><button id="1">X</button>
<span id="2">text</span><button id="2">X</button>
<span id="3">text</span><button id="3">X</button>
<span id="4">text</span><button id="4">X</button>
<span id="5">text</span><button id="5">X</button>
I have created this but not working i am new to jquery.
<script>
$("button").click(function() {
var id = this.id;
$( "span #"+id ).remove();
});
</script>
ids must be unique, use data attribute instead to store the corresponding ids.
Furthermore, your selector $( "span #" + id ) will select an element with some id that is a child of span. Remove the span, its unnecessary.
$("button").click(function() {
var id = $(this).data('id');
$("#" + id).remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span id="1">text</span><button data-id="1">X</button>
<span id="2">text</span><button data-id="2">X</button>
<span id="3">text</span><button data-id="3">X</button>
<span id="4">text</span><button data-id="4">X</button>
<span id="5">text</span><button data-id="5">X</button>
First set class attribute, remove id
Try this code :
<script>
$("button").click(function() {
$(this).prev('span').remove();
});
</script>
The id should be unique, beside that u could use something like this:
$('span[id="text'+id+'"]')
or
$('#text'+id)
and
<span id="text1">text</span><button id="button1">X</button>
I have a set of links that I'm trying to conceal inside a toggle , but my code below is not doing it . Please what have I done wrong.
Thank you.
<script>
$("#navigation li a[id]").click(function()) {
$("#" + this.id.substr(1)).slideToggle(600).siblings('.toggleDiv').slideUp(600);
});
</script>
<div id="search" class="toggleDiv" style="display:none">List</div>
<div id="sidebar">
<ul>
<li>President</li>
<li>Vice</li>
<li>Secretary</li>
</ul>
</div>
Brackets in jQuery are for attributes.
a[id] will not work because those a tags don't have an id attribute. You also don't have a #navigation div.
Try $("#sidebar ul li a")
You have missed a ).
$("#" + this.id.substr(1))
// ----^
However your selector doesn't select the anchor elements as they don't have ID attributes and this.id is undefined. It seems you want to get the id parameter of href attribute.
$("#sidebar li a").click(function()) {
$("#"+this.href.slice(-1)).slideToggle(600).siblings('.toggleDiv').slideUp(600);
});