this is my Html code
<div class="span12" id="test" style="width: 810px;">
<ul class="nav nav-tabs">
<li class="active">New Stream</li>
<li><a id="addspan" href="/#C" data-toggle="tab">+</a></li>
</ul>
<div class="tabbable">
<div class="tab-content" id="tabContent">
<div class="tab-pane active" id="tab1">
#Html.Partial("_NewStreamPartial",Model)
</div>
</div>
</div>
</div>
this my javascript
<script type="text/javascript">
$(function () {
var count = 2;
$('#addspan').click(function () {
var Id = $('.tab-pane active').attr('id');
});
});
</script>
I want to get Div Id whoes class name ".tab-pane active"(means i want to get active Div Id) how i can do this?
You can use dot to join classes in selector
Change
var Id = $('.tab-pane active').attr('id');
To
var Id = $('.tab-pane.active').attr('id');
It should be like this,
var Id = $('.tab-pane.active').attr('id');
You are using Descendant Selector here. but in your dom both classes are in same element. so you have to select by both classes.
You can try this
$('.tab-pane active').click(function () {
var Id = $(this).attr('id');
});
Hope this helps
Try this :
$('#addspan').click(function () {
alert($('.tab-pane .active').attr('id'));
});
You can get any HTML Attribute from an element with jQuery's .attr():
$('.tab-pane.active').attr('id');
Similarly, you can also get the JS Object Property value using .prop():
$('.tab-pane.active').prop('id');
Try the following code
$("#addspan").click(function(){console.log($(this)[0].id);});
Related
I am a novice to jquery. I have a section with some items. on click over any item i want to open the modal form, so instead of creating multiple modal forms i created one modal and than using carousel inside it to go through the items.
Now if one clicks the 10th item i want to apply the carousel active class to the 10th item. For now i have given id to all of them and using following code for each item. But that is not a good approach.
I appreciate your help!
Thanks
$('.filtr-item .mod1').on('click',function(){
$('#menuCarousel').find('.active').removeClass('active');
$('.mod1_item').addClass('active');
});
$('.filtr-item .mod2').on('click',function(){
$('#menuCarousel').find('.active').removeClass('active');
$('.mod2_item').addClass('active');
});
$('.filtr-item .mod3').on('click',function(){
$('#menuCarousel').find('.active').removeClass('active');
$('.mod3_item').addClass('active');
});
Use a generic class and add a data-attribute
$('.filtr-item .mod').on('click', function() { // or just $('.filtr-item').on
$('#menuCarousel').find('.active').removeClass('active');
$('.' + $(this).attr("data-mod") + '_item').addClass('active');
});
.active {
color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="filtr-item"><a class="mod" data-mod="mod1">Activate Mod1</a></li>
<li class="filtr-item"><a class="mod" data-mod="mod2">Activate Mod2</a></li>
<li class="filtr-item"><a class="mod" data-mod="mod3">Activate Mod3</a></li>
</ul>
<hr/>
<div id="menuCarousel">
<div class="mod1_item">Mod1</div>
<div class="mod2_item">Mod2</div>
<div class="mod3_item">Mod3</div>
</div>
For a longer explanation why to use $(this).attr("data-mod") rather than $(this).data("mod"), please see comments and jQuery Data vs Attr?
UPDATE: If you cannot change the html, you will need to interrogate the class
var re = /\bmod(\d+)/; // finds modN
$('.filtr-item a').on('click', function() {
$('#menuCarousel').find('.active').removeClass('active');
var match = this.className.match(re),
num = (match) ? match[1] : "";
if (num) $('.mod' + num + '_item').addClass('active');
});
.active {
color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="filtr-item"><a class="mod1">Activate Mod1</a></li>
<li class="filtr-item"><a class="mod2">Activate Mod2</a></li>
<li class="filtr-item"><a class="mod3">Activate Mod3</a></li>
</ul>
<hr/>
<div id="menuCarousel">
<div class="mod1_item">Mod1</div>
<div class="mod2_item">Mod2</div>
<div class="mod3_item">Mod3</div>
</div>
If I am not wrong you want to use one function instead of three different function you are using. you can give a custom data field to html eg. data-demo= "mod1".
and use the below code:
$('.filtr-item').on('click',function(){
$('#menuCarousel').find('.active').removeClass('active');
$('.'+$(this).attr('data-demo')+'_item').addClass('active');
});
JsFiddle
Without Data mode you can try this way.
$('.filtr-item').on('click', function() {
var num = $(this).prop('class').split(' ')[1].split('mod')[1];
$('#menuCarousel').find('.active').removeClass('active');
var cls = ".mod" + num + '_item';
$(cls).addClass('active');
});
I need some help. As you will see in my fiddle, I am attempting to use buttons to populate a single container div with content from multiple hidden divs, depending on which button is clicked. The problem I am having is, I don't know how to access the actual content in the hidden divs to populate the container div. As of now, I am using the id attributes for the hidden divs to demonstrate which div content I would like to display in the container.
I've seen a few other posts with link <a> attributes referencing hidden content, but none so far using a button element with click functionality to change div content.
jQuery(function ($) {
$('#button1').click(function () {
$('#info').empty();
$('#info').prepend('#option1');
});
$('#button2').click(function () {
$('#info').empty();
$('#info').prepend('#option2');
});
$('#button3').click(function () {
$('#info').empty();
$('#info').prepend('#option3');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button-panel">
<ul id="button-column" style="list-style: none;">
<li class="buttons"><button id="button1">Button 1</button></li>
<li class="buttons"><button id="button2">Button 2</button></li>
<li class="buttons"><button id="button3">Button 3</button></li>
</ul>
</div>
<div id="info-div">
<div id="info"></div>
</div>
<div id="hiddenDivs" style="display:none;">
<div class="info" id="option1">Box</div>
<div class="info" id="option2">Google Drive</div>
<div class="info" id="option3">Box</div>
</div>
Here is my fiddle
Here's a version that uses jquery data attributes. It reduces the redundancy and complexity and can be configured easily.
<body>
<div class="button-panel">
<ul id="button-column" style="list-style: none;">
<li class="buttons"><button id="button1" data-link="option1">Button 1</button></li>
<li class="buttons"><button id="button2" data-link="option2">Button 2</button></li>
<li class="buttons"><button id="button3" data-link="option3">Button 3</button></li>
</ul>
</div>
<div id="info-div">
<div id="info">
</div>
</div>
<div id="hiddenDivs" style="display:none;">
<div class="info" id="option1">Box</div>
<div class="info" id="option2">Google Drive</div>
<div class="info" id="option3">Box</div>
</div>
</body>
<script>
$('.buttons button').click(function (){
$('#info').empty();
$('#info').html($("#" + $(this).data('link')).html());
});
</script>
Example : https://jsfiddle.net/yvsu6qfw/3/
It sounds like maybe you were looking for using the button itself to populate data built into the button with a data attribute or something? If so you can do something like this:
HTML
<div class="button-panel">
<ul id="button-column" style="list-style: none;">
<li class="buttons"><button data-info="Box">Button 1</button></li>
<li class="buttons"><button data-info="Google Drive">Button 2</button></li>
<li class="buttons"><button data-info="Box">Button 3</button></li>
</ul>
</div>
<div id="info-div">
<div id="info"></div>
</div>
jQuery
$(document).ready(function (){
$('#button-column button').click(function (){
$('#info').html($(this).attr('data-info'));
});
});
If you want the first button to load the content from the first hidden div etc. without relying upon using the id attributes, you can use the .index() method. When you pass this as an argument it will return the index value of the click event target in the collection $("#button-column .buttons :button"). Afterwards you can pass the index value to the .get() method to retrieve the corresponding element from the collection of hidden divs $("#hiddenDivs .info").
$().ready(function(){
$("#button-column .buttons :button").on("click", function(){
$('#info').empty();
var clickedIndex = $("#button-column .buttons :button").index(this);
var hiddenInfo = $("#hiddenDivs .info").get(clickedIndex);
$('#info').prepend( $(hiddenInfo).text() );
});
});
you can use html function, without parameter gets the content of the element
with parameter replaces the content with the string parameter
$(document).ready(function (){
$('#button1').click(function (){
$('#info').html( $('#option1').html() );
});
$('#button2').click(function (){
$('#info').html( $('#option2').html() );
});
$('#button3').click(function (){
$('#info').html( $('#option3').html() );
});
});
In your code example, you do for example:
$('#info').prepend('#option1');
What you instruct to do here, is adding a text string '#option1' to an element with ID info.
What you intend to do is prepending the content of ID option1 to the element with ID info. You could do something like this instead:
$('#info').prepend($('#option1').html());
Another approach could be (but I don't know if that's relevant for you) to not clone content (since it costs you repaints) but toggle the specific elements instead. For example:
$('#option1,#option2').hide();
$('#option3').hide();
And yet another one: use data-attributes on your buttons:
Button 1
Button 2
<div id="info">
</div>
And the JS:
$('.button').on('click', function(event) {
event.preventDefault();
$('#info').html($(event.currentTarget).attr('data-text'));
});
Don't repeat yourself! To get the number out of an ID replace with "" all that is not a number using RegExp \D.
Using number from ID
Than, to get the actual content you can use $("#option"+ num).html() or $("#option"+ num).text() methods:
jsFiddle demo
jQuery(function ($) {
$('.buttons button').click(function () {
var num = this.id.replace(/\D/g,"");
$("#info").html( $("#option"+ num).html() );
});
});
Target element using data-* attribute
Alternatively you can store inside a data-* attribute the desired target selector ID:
<button data-content="#option1" id="button1">Button 1</button>
and than simply:
jsFiddle demo
jQuery(function ($) {
$("[data-content]").click(function () {
$("#info").html( $(this.dataset.content).html() );
});
});
http://api.jquery.com/html/
http://api.jquery.com/text/
If the expectation is to get same indexed hidden div content, Then the below code should work.
$(document).ready(function (){
$('.buttons button').click(function (){
$('#info').empty();
var index = $('.buttons button').index($(this));
$('#info').html($('.info:eq('+index+')').html());
});
});
I have the following HTML fragment.
<div class="diagram-frame">
<div class="diagram">
<span class="diagram-name">Drawing Objects</span>
<svg>...lots of child elements...</svg>
</div>
<div class="diagram-name">
<a class="idlink" title="Drawing Objects (data models)" href="...">NA - Drawing Objects</a>
</div>
</div>
Currently, I use this jQuery selector to detect what has been clicked on:
jClicked.add(jClicked.parents()).is('div.diagram-frame')
jClicked is jQuery object containing the clicked element.
But I need to exclude clicks on the diagram-name div. How can I add negation using the .not('div.diagram-name') function call?
Since .is() matches a css selector, why not use the css :not() pseudo, and do all in one command?
jClicked.add(jClicked.parents()).is('div.diagram-frame:not(.diagram-name)')
Like this?
jClicked.add(jClicked.parents())
.not(jClicked.$('div.diagram-name'))
.is('div.diagram-frame')
Note, Not certain about jClicked object ?
Try
$(function() {
var jClicked = [];
$(".diagram-frame").on("click", function(e) {
if (!$(e.target).parent().is("div.diagram-name")) {
jClicked.push(e.target);
console.log($(jClicked));
alert(jClicked.length);
}
});
});
$(function() {
var jClicked = [];
$(".diagram-frame").on("click", function(e) {
e.preventDefault();
if (!$(e.target).parent().is("div.diagram-name")) {
jClicked.push(e.target);
console.log($(jClicked));
alert(jClicked.length);
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="diagram-frame">
<div class="diagram">
<span class="diagram-name">Drawing Objects</span>
<svg>...lots of child elements...</svg>
</div>
<div class="diagram-name">
<a class="idlink" title="Drawing Objects (data models)" href="...">NA - Drawing Objects</a>
</div>
</div>
jsfiddle http://jsfiddle.net/guest271314/2myjbuhL/
I have a list of menus like
<ul id="toc">
<li>Description</li>
<li>Messages</li>
<li><a class="job_content">Applicants</a></li>
</ul>
Then i have a div like
<div id="job_item35116" class="items">
</div>
Then i have some more divs like
<div id="#description35116">
</div>
<div id="#msg_body35116">
</div>
So i am trying to do is when i will click the list item then these div (#description35116) will be appended inside id="job_item35116". (One item at a time)
So can i append a div with its ID inside another div ??
I tried like
JS (But its not working)
$('.job_content').unbind('click').click(function(){
var href = $(this).attr('href');
var id = $(this).attr('id');
var job_item = '#job_item'+ id;
if($(job_item).children().length > 0 ){
$(".items").empty();
$(href).toggle();
}else{
$(href).toggle();
}
return false;
});
Try this:
$('#toc li').on('click','a',function(e){
e.preventDefault();
var id = $(this).attr('href');
var div = $('<div id="' + id + '"></div>');
$(div).text(id);
$('.items').append($(div));
});
FIDDLE DEMO
Working solution: http://jsfiddle.net/aT7pF/1/
Remove the "#" from you ID-names in the div. It makes you live more easy.
From a coder perspective: Just place blank text within the </li>-tags. you don't need a <a href/>. Instead add a custom attribute to your tags, eg divId which you use to store the value of the </div>. it makes more sense this way. With JQuery you can fetch the value which you stored in your custom attribute easily with .attr()
(Refactored) HTML:
<ul id="toc">
<li divId="description35116">Description</li>
<li divId="msg_body35116">Messages</li>
<li>Applicants
</li>
</ul>
<div id="job_item35116" class="items"></div>
<div id="description35116">description35116</div>
<div id="msg_body35116">msg_body35116</div>
Javascript:
$("#description35116").hide();
$("#msg_body35116").hide();
var divId = $(this).attr("divId");
/*
you can make this line shorter:
$("#job_item35116").empty().append("<div>" +$("#"+divId).html() + "<div>");
*/
// by doing this:
$("#job_item35116").html("<div>" +$("#"+divId).html() + "<div>");
I have 2 images (.field-img) , wrapped in a container (.group-container),
each of the images are in a unique field id, so my tpl is broken down into
<div class=group-container>
<div id=field1>
<div class=field-img>
</div></div>
<div id=field2>
<div class=field-img>
</div></div>
</div>
my js is
$(".group-container .field-img").click(function() {
alert(".group-container .field-img");
what I would like is to detect automatically if the image belongs to field1 or field2.
So I could alert (".group-container .field1/2 .field-img");
How would I do this?
Thanks for any help
$(".group-container .field-img").click(function() {
var field=$(this).parent().attr('id');
});
An alternative to Izzey's solution is to use .closest with an attribute starts with selector (or classname because it would be more appropriate for those divs to have a common class)
$(".group-container .field-img").click(function() {
var field = $(this).closest("[id^=field]")[0].id;
});
or, with a common classname,
html
<div class=group-container>
<div class="field" id=field1>
<div class=field-img>
</div></div>
<div class="field" id=field2>
<div class=field-img>
</div></div>
</div>
js
$(".group-container .field-img").click(function() {
var field = $(this).closest(".field")[0].id;
});
$(".group-container .field-img").click(function() {
var field = this.parentNode.id;
alert (".group-container ." + field + " .field-img");
});
$(".group-container .field-img").each(function() {
$(this).click(function(){
var fieldid=$(this).parent().attr('id');
});
});
Since one element is inside the other, the click will propagate up anyway, so you could always just bind the click to the parent element and do :
$('div[id^="field"]').on('click', function() {
alert(".group-container "+this.id+" .field-img");
});
FIDDLE
or even get them all dynamically:
$('div[id^="field"]').on('click', function(e) {
alert('.'+this.parentNode.className+" "+this.id+" ."+e.target.className);
});
FIDDLE