Hi I am poulating a list in ul - li HTML tag dynamically. All I need is to get value of selected li of corresponding ul. I tried all possible jquery methods I got but still i am getting undefined.I am populating ul - li as:
jQuery.get(url, function(data) {
for(i=0;i<data.length;i++){
//console.log(data[i]) //"+data[i]+"
msg = "<li> <a href=#>"+data[i]+"</a></li>";
document.querySelector('#option1').innerHTML += msg;
}
});
HTML section is as:
<body>
<div class="wrap">
<div class="content">
<div class="cate-map">
<ul id="option1" onclick="doSelection()">
</ul>
</div>
</div>
<div class="content2">
<div class="cate-map">
<ul id="option2">
</ul>
</div>
</div>
<div class="clear"></div>
<div class="content3"> <textarea id="content4"></textarea>
</div>
</div>
</body>
onclick method is as :
function doSelection(){
var id = $('#option1 li.selected').attr('value');
alert(id);
}
Problem is that I am getting 'undefined' for id value.
UPDATE
As you all suggested I changed my code as:
Populating ul as:
jQuery.get(url, function(data) {
for(i=0;i<data.length;i++){
msg = "<li data-input="+data[i]+" class='selected'> <a href=#>"+data[i]+"</a></li>";
document.querySelector('#option1').innerHTML += msg;
}
});
HTML ul as:
<div class="cate-map">
<ul id="option1" onclick="doSelection()">
</ul>
</div>
Onclick function as:
function doSelection(){
alert($('#option1 li.selected').attr('data-input'));
}
Now I am getting a value as alert but I am getting the first element as alert always. Whichever element I click still always getting the first element of list. Please do help.
As you see in the comment from #Frédéric Hamidi value attribute is not there for li when it is used with ul so better add your own attribute to it then access it like this:
for(i=0;i<4;i++){// use actual data it is just a demo
msg = "<li data-input="+i+" class='selected'> <a href=#>"+i+"</a></li>";
document.querySelector('#option1').innerHTML += msg;
}
$('#option1 li').click(function(){
//console.log($(this).attr('data-input'));
alert($(this).attr('data-input')); // this will alert data-input value.
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="content">
<div class="cate-map">
<ul id="option1">
</ul>
</div>
</div>
<div class="content2">
<div class="cate-map">
<ul id="option2">
</ul>
</div>
</div>
<div class="clear"></div>
<div class="content3"> <textarea id="content4"></textarea>
You need add selected class to any li element.
Check it out:
msg = "<li class="selected"> <a href=#>"+data[i]+"</a></li>";
And get the content of anchor tag:
function doSelection(){
var id = $('ul#option1 > li.selected a').text();
alert(id);
}
This will help you. You can use jquery method for handling selection event.
$("#option1 li").click(function() {
alert($(this).html());
});
Related
i have the following html example
<div class="list">
<div class="Teamlist">
<div class="Teamcontainer OPEN" dataid="73592"><div>
</div>
</div>
i am trying to get the dataid from teamcontainer but it keeps on returning undefined.This is what i tried
if ($this.hasClass("list") && $this.hasClass("Teamlist") && $this.hasClass("Teamcontainer")) {
var ID = $this.parents(".Teamcontainer").attr("dataid");
}
the above id just returns undefined. how do i get ID=73592? what am i doing wrong
Just use jquery selector like this:
var ID = $(".list .Teamlist .Teamcontainer").attr("dataid");
I hope it helps.
you can do it in 2 ways. first using attr as Michal answered above and 2nd if you change your dataid to data-id,, here are both the examples.
$(document).ready(function(){
//first way by Attr
var dataID = $(".list .Teamlist .Teamcontainer").attr("dataid");
console.log(dataID);
// second using data, but for this you need to change your attribut to data-id
var dataId = $(".list .Teamlist .Teamcontainer.OPEN").data("id");
console.log(dataId);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list">
<div class="Teamlist">
<div class="Teamcontainer" dataid="73592"><div>
</div>
</div>
<div class="list">
<div class="Teamlist">
<div class="Teamcontainer OPEN" data-id="73592"><div>
</div>
</div>
I have multiple ul and li's and want to get the closest div respective html content when click on li.
I have tried this like $(this).closest('div').find('.email-con').show().html() getting undefined.
<div class="col-md-12">
<div class="col-md-3 subs-alrts">
<ul class="cp-expand sent-mails" id="sent-mails">
<li class="clearfix">
<div class="cp-exp-title clearfix col-md-12">Dasara Mail</div>
<div class="cp-exp-con col-md-12">
<ul>
<li class="evnt-mail-cls" >06/01/16</li>
</ul>
</div>
</li>
</ul>
</div>
<div class="col-md-9 email-con" id="email-con" style="display:none">
dasara mail content
</div>
</div>
My script is:
$('#sent-mails .cp-exp-con ul li').click( function(){
alert($(this).closest('div').find('.email-con').show().html());
});
If you are trying to find the content of .email-con then you need to traverse upto .subs-alrts and then pick its next element.
$('#sent-mails .cp-exp-con ul li').click( function(){
alert($(this).closest('.subs-alrts').next('.email-con').show().html());
});
See the final code:
$(function() {
$('#sent-mails .cp-exp-con ul li').click(function() {
var x = $(this).closest('.subs-alrts').next('.email-con');
x.show();
alert(x.html());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12">
<div class="col-md-3 subs-alrts">
<ul class="cp-expand sent-mails" id="sent-mails">
<li class="clearfix">
<div class="cp-exp-title clearfix col-md-12">Dasara Mail</div>
<div class="cp-exp-con col-md-12">
<ul>
<li class="evnt-mail-cls">06/01/16</li>
</ul>
</div>
</li>
</ul>
</div>
<div class="col-md-9 email-con" id="email-con" style="display:none">
dasara mail content
</div>
</div>
Try this
$('ul li').click(function(){
var a=$(this).closest('div');
a=$(this).closest('div').text();
alert(a);
});
You need :
$('#sent-mails .cp-exp-con ul li').click( function(){
alert($(this).closest('div').parent().find('.email-con').show().html());
});
$('#sent-mails .cp-exp-con ul li').click( function(){
alert($('.email-con').show().html());
});
Change for jquery code with following , it may help you.
$('#sent-mails .cp-exp-con ul li').click( function(){
alert($(this).parents('.subs-alrts').parent('div').find('.email-con').show().html());
});
Try this:
$('#sent-mails .cp-exp-con ul li').click( function(){
alert($(this).parents('.subs-alrts').parent().find('.email-con').show().html());
});
You have two way of doing this explained in code comments :
Note: the second (and easiest) require that you add a class to your top div (because col-md-12 is a bootstrap one that could change in the future)
// if you click there will be 2 alerts because I wrote two way of doing it :
$('#sent-mails .cp-exp-con ul li').click( function() {
var html = $(this)
// Get the parent with class "subs-alrts"
.parents(".subs-alrts")
// get the following element that have the class "email-con"
.next('.email-con')
.show().html();
alert(html);
});
// OR
$('#sent-mails .cp-exp-con ul li').click( function() {
var html = $(this)
// Get the parent with class "MAIN_DIV"
.parents(".MAIN_DIV")
// find the child element that have the class "email-con"
.find('.email-con')
.show().html();
alert(html);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12 MAIN_DIV">
<div class="col-md-3 subs-alrts">
<ul class="cp-expand sent-mails" id="sent-mails">
<li class="clearfix">
<div class="cp-exp-title clearfix col-md-12">Dasara Mail</div>
<div class="cp-exp-con col-md-12">
<ul>
<li class="evnt-mail-cls" >06/01/16</li>
</ul>
</div>
</li>
</ul>
</div>
<div class="col-md-9 email-con" id="email-con" style="display:none">
dasara mail content
</div>
</div>
I'm stuck with a menu I'd love to add to my website.
I have branched my work in:
Commercial
Fashion
Music
Portrait
So I have a menu like this one above.
When I click on one section, let's say "Commercial" I want all the others to be display:none.
Have a look at this FIDDLE: http://jsfiddle.net/bfevLsj2/8/
$(document).ready(function() {
$("#commercial").click(function() {
$(".commercial").toggleClass("show");
$(".fashion").toggleClass("hid");
$(".music").toggleClass("hid");
$(".portrait").toggleClass("hid");
});
});
You need siblings() width jquery
Description: Get the siblings of each element in the set of matched elements, optionally filtered by a selector.
$("[id]").click(function(){ //onclick on element with ID
var selected = $(this).attr("id"); // save the value of that ID
$("."+ selected).show().siblings("[class]").hide()//find the class with the same value as class and show it then find all siblings class and hide them
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="commercial">Commercial</div>
<div id="fashion">Fashion</div>
<div id="music">Music</div>
<div id="portrait">Portrait</div><br />
<div class="commercial">C</div>
<div class="fashion">F</div>
<div class="music">M</div>
<div class="portrait">P</div>
BUT a better approach would be to use data-*
$("[data-tab]").click(function(){
var current = $(this).attr("data-tab");
$("[data-content="+ current +"]").show().siblings("[data-content]").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div data-tab="commercial">Commercial</div>
<div data-tab="fashion">Fashion</div>
<div data-tab="music">Music</div>
<div data-tab="portrait">Portrait</div><br />
<div data-content="commercial">C</div>
<div data-content="fashion">F</div>
<div data-content="music">M</div>
<div data-content="portrait">P</div>
AGAIN it is better to use pure javascript
function runClick (event) {
var current = this.getAttribute("data-tab");
for( var content = 0; content < dataContent.length; content++) {
dataContent[content].style.display = "none"
}
document.querySelector("[data-content="+ current + "]").style.display = "block"
}
var dataTabs = document.querySelectorAll("div[data-tab]"),
dataContent = document.querySelectorAll("div[data-content]");
for(var tab = 0; tab < dataTabs.length; tab++){
dataTabs[tab].addEventListener("click", runClick , false);
}
<div data-tab="commercial">Commercial</div>
<div data-tab="fashion">Fashion</div>
<div data-tab="music">Music</div>
<div data-tab="portrait">Portrait</div><br />
<div data-content="commercial">C</div>
<div data-content="fashion">F</div>
<div data-content="music">M</div>
<div data-content="portrait">P</div>
HTML:
<div id="commercial" class="menuItem">Commercial</div>
<div id="fashion" class="menuItem">Fashion</div>
<div id="music" class="menuItem">Music</div>
<div id="portrait" class="menuItem">Portrait</div><br />
<div class="commercial content">C</div>
<div class="fashion content">F</div>
<div class="music content">M</div>
<div class="portrait content">P</div>
JavaScript:
$(document).ready(function(){
$(".menuItem").click(function(){
var id = this.id;
$('.content').removeClass('show').addClass('hid');
$('.'+id).addClass('show').removeClass('hid');
});
});
CSS:
.hid {
display:none;
}
.show {
display:block;
}
Fiddle
Have a look at this fiddle, think it's what you want
Essentially you can use .toggle() to traverse and show/hide according to whether it's the one you want to show.
$(function(){
// find all the links that you can click
$("div.clickable a").click(function(e) {
// when they're clicked, find the identifier of
// the tab/div you want shown
var clickedId = $(e.target).parent("div").attr("id");
// traverse all of the divs and show/hide according
// to whether it's the tab you want
$("div.section").each(function(index, div) {
$(div).toggle($(div).hasClass(clickedId));
});
});
});
And the HTML:
<div id="commercial" class="clickable">Commercial</div>
<div id="fashion" class="clickable">Fashion</div>
<div id="music" class="clickable">Music</div>
<div id="portrait" class="clickable">Portrait</div>
<br />
<div class="commercial section">C</div>
<div class="fashion section">F</div>
<div class="music section">M</div>
<div class="portrait section">P</div>
HTH
Edited to add an "ALL" link in this fiddle
$("div.clickable a").click(function(e) {
// when they're clicked, find the identifier of
// the tab/div you want shown
var clickedId = $(e.target).parent("div").attr("id");
// traverse all of the divs and show/hide according
// to whether it's the tab you want
$("div.section").each(function(index, div) {
$(div).toggle($(div).hasClass(clickedId) || clickedId=="ALL");
});
});
After adding this to the list of clickable divs:
<div id="ALL" class="clickable">
ALL
</div>
Your could that more easy like:
<div class="link" id="commercial">Commercial</div>
<div class="link" id="fashion">Fashion</div>
<div class="link" id="music">Music</div>
<div class="link" id="portrait">Portrait</div><br />
<div class="commercial elem">C</div>
<div class="fashion elem">F</div>
<div class="music elem">M</div>
<div class="portrait elem">P</div>
<script type="text/javascript">
$(document).ready(function(){
$(".link").click(function(){
var id = $(this).attr('id');
$('.elem').hide();
$('.' + id).show();
});
});
</script>
So i'm pretty new to this, please bear with me :)
And it's kinda working for me, this is what I have:
HTML:
<form id="live-search" action="" class="styled" method="post">
<fieldset>
<input type="text" class="text-input" id="filter" value="" placeholder="Søg efter skole..." />
<span id="filter-count"></span>
</fieldset>
jQuery:
$(document).ready(function(){
$("#filter").keyup(function(){
// Retrieve the input field text and reset the count to zero
var filter = $(this).val(), count = 0;
// Loop through the comment list
$(".ss_voting_manual .ss_voting_entry_list").find("li").each(function(){
// If the list item does not contain the text phrase fade it out
if ($(this).text().search(new RegExp(filter, "i")) < 0) {
$(this).fadeOut();
// Show the list item if the phrase matches and increase the count by 1
} else {
$(this).show();
count++;
}
});
// Update the count
var numberItems = count;
$("#filter-count").text("Klasser fundet = "+count);
});
});
But when I make a search it do find the li, but it lose most of the style, if you see the screenshot it will make better sense then I can do in writing.
<div id="manual_voting" class="ss_voting_manual">
<ul class="ss_voting_entry_list">
<li class="my_db_entry item_handle_22924874" id="my_db_entry_22924874" style="">
<div class="entry_title entry_details">
<h4>Koge Handelsskole - 3C</h4>
</div>
<div class="entry_photo">
<ol>
<li style="display: list-item;"><img alt="" src=
"https://d2ndy3xguswqvu.cloudfront.net/images/220405/22924874/original_89bf1593506cabda8ec9fd63ac6e35d0.png"></li>
</ol>
</div>
<div class="entry_votes entry_details">
<span class="votes">65</span> Stemmer
</div>
<div class="entry_description entry_details ss_preserve_ws"></div>
<div class="itemActions entry_actions">
<ul>
<li class="item_vote" style="display: inline;"><a class="vote_link vote"
href="#" onclick=
"SST.vote_for(widget_14972805, 22924874, this); return false;">Stem</a></li>
<li class="item_share" style="display: inline;"><a class="share_link" href=
"#" onclick="ss_share(widget_14972805, 22924874); return false;">Del med dine
venner</a></li>
</ul>
</div>
<div class="clear"></div>
</li>
<li class="my_db_entry item_handle_22924821" id="my_db_entry_22924821" style=
"display: list-item;">
<div class="entry_title entry_details">
</div>
<div class="clear"></div>
</li>
</ul>
<div class="clear"></div>
<div class="ss_voting_paging" id="paging_voting"></div>
Wrong Selector
In your target code you are searching for all the li's under .ss_voting_manual .ss_voting_entry_list including grand children.
$(".ss_voting_manual .ss_voting_entry_list").find("li")
This is causing your grandchildren li's, the one's that are wrapping the img tags, to be hidden.
Solution
Change your selector to fetch only direct descendant li's:
$(".ss_voting_manual .ss_voting_entry_list").children("li")
or
$(".ss_voting_manual .ss_voting_entry_list > li")
This will only fetch the first direct set of li's after the ul.
I have 2 questions:
1) Since I have similar structure for the html contents and the only difference is that class title contents are different. I tried using $(div .title:contains("cat")) also
$(div .title).text()="cat")
2)How can I get the index of the accordion by just checking the $(div a) contents are required ones. I tried using $(div a).text()=="cat"
Check the codes here:
HTML1 contents
<div class="mod moduleselected" id="mod969">
<div class="content module moduleselect">
<div class="hd" ><div class="inner">
<div class="title">cat</div>
<ul class="terminallist"></ul>
<ul class="buttons">
<li class="help"></li>
<li class="show" ></li>
</ul>
</div>
</div>
</div>
<div class="mod moduleselected" id="mod969">
<div class="content module moduleselect">
<div class="hd" ><div class="inner">
<div class="title">rat</div>
<ul class="terminallist"></ul>
<ul class="buttons">
<li class="help"></li>
<li class="show" ></li>
</ul>
</div>
</div>
</div>
<div class="mod moduleselected" id="mod969">
<div class="content module moduleselect">
<div class="hd" ><div class="inner">
<div class="title">dog</div>
<ul class="terminallist"></ul>
<ul class="buttons">
<li class="help"></li>
<li class="show" ></li>
</ul>
</div>
</div>
</div>
Accordian
<div id="dia">
<div id="dialog" title="Detailed FeedBack ">
<div id="accordion">
<h3>dog</h3>
<h3>cat</h3>
<h3>rat</h3>
</div>
</div>
</div>
Javascript
$('div .title').mouseover(function() {
if($("div a").text().indexOf("cat")!=-1)
{
$("#accordion").accordion("activate", 1);
}
$('div .title').mouseleave(function(){$("#accordion").accordion("activate", -1); });
});
Here is what I am trying to do with this javascript code. When I mouse over the cat contents I want the accordion with cat contents to open. And when I leave it to close the accordion selection.
When I hover my mouse over the html contents cat ,rat. It should side by side open the accordion button of those contents. Example: I hovered over rat (of html contents) I should see accordion rat open (or active i.e. contents visible).
Updated (see demo)
It sounds like you want something like this: when a content section is hovered over, find the title of that section, match its text against the text of the <a> elements in the accordion, and activate that section:
$(function() {
$("#accordion").accordion();
var links = $('#accordion a').map(function() {
return $(this).text().trim().toLowerCase();
}).toArray();
$('div.content').mouseover(function() {
var title = $(this).find('div.title').text().toLowerCase();
var index = links.indexOf(title);
if (index != -1) {
$("#accordion").accordion("activate", index);
}
});
});
P.S. jQuery does have a .hover() method for this as well.
It should be as succinct as the following (with potential minor tweaks):
$('.content .title').hover(function(e){
var index = this.textContent.split(/\W/)[1] - 1;
$("#accordion").accordion('activate', index);
});
Be careful with the HTML as this regular expression is overly simple in that it just grabs the last "word" which in the case of your example is a number. We subtract one to get a zero-based index. That will break if you add further text to the element.
See: http://jsfiddle.net/35yGV/