My goal is to hide the prev or next div after clicking on a li element.
This is the script:
jQuery('.menu-ul li').on('click',function(){
var current_id = jQuery(this).data('id');
var menu_id = '#' + current_id;
jQuery(menu_id).next("div").attr("id").hide()
jQuery(menu_id).prev("div").attr("id").hide();
});
The script above works fine, but when I put the function hide() I get this error:
Uncaught TypeError: jQuery(...).next(...).attr(...).hide is not a function
How can I solve it?
To ge the previous element use $(selector).prev(), and to get the next use $(selector).next(). Then use .hide() to hide any, or both of them.
Like this:
jQuery('.menu-ul li').on('click',function(){
var current_id = jQuery(this).data('id');
// We get the element and store it, so we don't get it twice later.
var element = jQuery('#' + current_id);
element.prev().hide();
element.next().hide();
});
try following code,
jQuery('.menu-ul li').on('click',function(){
var current_id = jQuery(this).data('id');
var menu_id = '#' + current_id;
jQuery(menu_id).next("div").hide()
jQuery(menu_id).prev("div").hide();
});
Related
I want to get the ID of the clicked anchor and add a class to the element with same ID.
$galleryItem.click(function(e){
e.preventDefault();
var $galleryProjectContent = $(this).attr("id");
console.log($galleryProjectContent);
$galleryProject.addClass('d-block slideInUp animated');
$body.css('overflow', 'hidden');
$galleryProjectContent.addClass('d-block');
});
I get:
Uncaught TypeError: o.addClass is not a function.
This code is the problem:
var $galleryProjectContent = $(this).attr("id");
$galleryProjectContent is a string, not a jQuery object or a DOM element.
You've said:
I want to get the ID of the clicked anchor and add a class to the element with same ID.
There's no reason to get the ID and then look up the element with the ID, you already have the element: this. It has to be the element you're looking for (since id values must be unique on the page). To get a jQuery wrapper for it, just use $(this). So simply:
var $galleryProjectContent = $(this);
If you needed to get an element by an ID that you have as a string, you could do it like this:
var $x = $("#" + theId);
// or
var $x = $(document.getElementById(theId));
But again, there's no reason to do that here.
I found many ways to operate on new elements after DOM change but all works with events. I just want on click hide element 1 than replace it with 2 with display:none and show it.
My code so far:
/*
* EDIT COMMENT
*/
jQuery(document).on('click',options.targets.container+' '+options.targets.comment_edit, function(e){
e.preventDefault();
var target = e.target;
target = jQuery(target).parent();
var comment_content = jQuery(target).find('.comment_content');
var comment_content = jQuery(comment_content).text();
jQuery(target).find('.comment_content').hide(400,function(){
jQuery(target).find('.comment_content').replaceWith('<textarea style="display:none" class="'+options.targets.comment_edit_form.replace('.','')+'">'+comment_content+'</textarea>');
//not working
jQuery(target).delay(400).find(options.targets.comment_edit_form.replace('.','')).show(400)
console.log(jQuery(target).find(options.targets.comment_edit_form.replace('.','')))
});
})
I want to show new element just after i do replacing.
Problems are 2:
1: I can't get new element with jquery because it is added;
2: I can't display it after other function is done.
Here's how I created an element:
var dialogDiv = document.createElement("div");
$("body").append(dialogDiv);
$(dialogDiv).html('<p>' + text + '</p>');
Search element after insertion.
Modify your code as
jQuery(document).on('click',options.targets.container+' '+options.targets.comment_edit, function(e){
e.preventDefault();
var target = e.target;
target = jQuery(target).parent();
var comment_content = jQuery(target).find('.comment_content');
var comment_content = jQuery(comment_content).text();
jQuery(target).find('.comment_content').hide(400,function(){
jQuery(target).find('.comment_content').replaceWith('<textarea style="display:none" class="'+options.targets.comment_edit_form.replace('.','')+'">'+comment_content+'</textarea>');
//show after ( put your code here )
jQuery(target).find('textarea').show();
});
})
http://jsbin.com/pirinocuku/edit?html,js,output
What i did wrong was
jQuery(target).find(options.targets.comment_edit_form.replace('.','')).show(400)
options.targets.comment_edit_form is class and i remove . from it so it couldnt find an element;
Changed to:
jQuery(document).on('click',options.targets.container+' '+options.targets.comment_edit, function(e){
e.preventDefault();
var target = e.target;
target = jQuery(target).parent();
var comment_content = jQuery(target).find('.comment_content');
var comment_content = jQuery(comment_content).text();
jQuery(target).find('.comment_content').hide(400,function(){
jQuery(target).find('.comment_content').replaceWith('<textarea style="display:none" class="'+options.targets.comment_edit_form.replace('.','')+'">'+comment_content+'</textarea>');
jQuery(target).find(options.targets.comment_edit_form.replace('.','')).show(400)
});
})
My bad, sorry guys
I want to change the effect (class) of my scroller to the effect on the button a user clicks. Here's my code:
var scroller=$('#main ul.stroll'); --> I know this is right.. just a var reference
function effectSelect(e){
var target = $(e.currentTarget);
$(target).click(function(){
var effectName=target.nodeValue;
var effect='stroll ' + effectName;
scroller.removeClass();
scroller.addClass(effect);
})
}
It worked at a certain point then suddenly stopped working. There are no errors in the console when I run it. What am I doing wrong? Let me know if you need more info
Figured it out finally. Hope this helps anyone in a similar situation!
function init(event) {
stroll.bind($scroller);
$('.nav li').on('click', function(event){
var target = $(event.target);
var effectName = target.text();
var effect = 'stroll ' + effectName;
$scroller.removeClass();
$scroller.addClass(effect);
console.log($scroller.attr('class'))
});
}
I am sure this is something very easy to do, but I'm stuck.
I have multiple forms in a page each one with a "duplicate" button.
The button duplicates a row and put it at the end of a table that is inside of each form. The class of the tables is '.table-add'. So I'm trying to tell the button to find the closest form element and add it to the path on my selector, but it is not working. I know it can work if I put an ID in each form and call for them, but that's not what I want. Thanks for help.
This is my code:
i=0;
$(".duplicate").on("click", function(e) {
i++;
$newID = 'clon'+i;
selectedObj = $($( e.target ).closest("form"));
alert(selectedObj.html()); //**THIS WORKS**
$cloned = '<tr class="'+$newID+'">'+$(selectedObj+' .table-add tr:first').next().html()+'</tr>';
$(selectedObj+' .table-add > tbody:last').append($cloned);
});
Just use this:
var i=0;
$(".duplicate").on("click", function(e) {
i++;
var $newID = 'clon'+i;
var selectedObj = $(e.target).closest("form");
alert(selectedObj.html()); //**THIS WORKS**
var $cloned = '<tr class="'+$newID+'">'+selectedObj.find('.table-add tr:first').next().html()+'</tr>';
selectedObj.find('.table-add > tbody:last').append($cloned);
});
selectedObj is a jQuery object so you can use the .find() function to select .table-add tr:first and '.table-add > tbody:last'.
I am trying to clone multiple divs on my page by using the jQuery .clone() method. The problem is, as soon as a div is cloned, it needs to have a unique ID. The cloned ID has to be there too. I was thinking I could keep the old ID and then just add a number on, increasing as more div's are on the page.
Example: base ID = one, so div one would be id, then div two would be id-2, then div three would be id-3, etc.
Is this possible? My attempt at this is below:
$("a").click(function(){
var target = $(this).attr("href");
var id = $(target).attr("id");
$(target).clone().attr("id",id + $(id).size()).attr("class","drag").appendTo("body");
});
Each a tag looks like this:
One
Two
Then the cloned element looks like this:
<div class="drag base" style="background-color:blue" id="one"></div>
<div class="drag base" style="background-color:green" id="two"></div>
See this: http://jsfiddle.net/3tu7V/1/
$(function(){
$("a").click(function(){
var target = $(this).attr("href");
var id = $(target).attr("id");
var click = $(target).data("clicked") || 0;
$(target).data("clicked", ++click);
$(target).clone().attr("id",id + click).attr("class","drag").appendTo("body");
});
});
I think this does what you want according to your comment:
"Ah, is there any way for the element ID to be reset when the base ID is unique? Ex.) "If you clone div "one", it will produce "one-1", then "one-2", but if you then clone div "two", it will produce "two-3", not "two-1""
i think in ur case $(id).size() will always be = 2. (only the last one and its clone will have the same id)
why don't you use a global variable var clickNumber that you increment each time.
your code will be
var clickNumber = 0;
$("a").click(function(){
var target = $(this).attr("href");
var id = $(target).attr("id");
clickNumber ++;
$(target).clone().attr("id","id-" + clickNumber).attr("class","drag").appendTo("body");
});
See this live example
var increment = 2;
$('a').live('click', function() {
$(this).clone().attr('id','id-' + (increment++)).appendTo('body');
});
Result:
Revised answer:
You can use the jQuery attribute starts with selector to keep a track of the clones, and their counts:
$("a").click(function() {
var targetId = $(this).attr("href").substring(1); // "one", "two"
var count = $("div[id^=" + targetId + "]").length; // initial value will be 1
$("#" + targetId).clone().attr("id", targetId + '-' + count).attr("class", "drag").appendTo("body");
});
Demo
You could do something like this:
$('a').addClass('link');
$('body').on('click', 'a', function() {
$(this).clone(true).attr('id', 'id-' + $('.link').length).appendTo('body');
});
Demo: http://jsfiddle.net/Em8PE/1/