I want change part two of class name in each div into tag <span> from '.myclass_2' to 'yourclass', (in following html code). Here is my try with jQuery but they doesn't work true. How is fix it?
Demo: http://jsfiddle.net/sTF3U/
<span>
<div class="myclass_1 myclass_2">
Click Me_1
</div>
<div class="myclass_1 myclass_2">
Click Me_2
</div>
</span>
var $this = $('.click'),
$clone_1 = $('span').clone();
alert($clone_1.html());
$('.click').live('click', function (e) {
e.preventDefault();
$clone_2 = $('span').clone();
$clone_2.find('div').split(" ")[1].addClass('youClass');
$clone.find('.auto_box2:last .mediumCell').each(function () {
$(this).split(" ")[1].removeClass().addClass(unique());
});
var $result = $('span').clone();
alert('ok');
})
Try this:
$("div.myclass_2").removeClass("myclass_2").addClass("yourclass");
BTW, a <div> inside a <span> is not valid HTML.
Juse use removeClass passing the required class to remove and then use addClass passing the required class to add to any element. Try this
$(".myclass_2").removeClass("myclass_2").addClass("yourclass");
Use jquery removeClass and addClass method to remove the existing class and then add the renamed class
Related
This is probably a very easy approach, however I haven't been able to figure it out.
My approach is to get all <img> elements that have the "expanded-image" class that are within the "img-preview" of my current "entry".
This is my html:
<div class="entry">
<div class="img-preview">
<img>
<img class="expanded-image" style="display:none;">
</div>
<div class="content">
[..]
[..]
<span class="more-text"></span>
[..]
[..]
</div>
</div>
And this is the JS I work with:
$('.content').each(function(event) {
$(this).find('span.more-text').click(function(event) {
// TODO
});
});
Firstly you don't need the each() at all as you can apply the click() event handler to all elements within a single selector.
To solve your issue you can use closest() to find the nearest parent .entry element to the clicked .more-text. From there you can find() all the .expanded-image elements. Try this:
$('.content span.more-text').click(function(event) {
var $imgs = $(this).closest('.entry').find('.img-preview .expanded-image');
// work with $imgs here...
});
$('.content').each(function(event) {
var $content = $(this);
$(this).find('span.more-text').click(function(event) {
$content.parent().find('.expanded-image'); // there you go
});
});
Use o combination of closest, prev and find
$('span.more-text').click(function(event) {
$(this).closest('.content').prev().find('.expanded-image');
});
You can use closest() to bubble up to find the parent given in the selector. Then from there you can navigate down to the required elements.
$(this).closest('.entry').find('.img-preview .expanded-image');
Also as Ron has suggested you dont have to loop and then bind the click events. You can simply do
$('.entry .content .more-text').click(function(){
$(this).closest('.entry').find('.img-preview .expanded-image');
})
jQuery:
$('.clickhere').click(function(e){
e.preventDefault();
$(this).closest('.row').children('.abc').hide(); // working
$(this).closest('.row').children('.abc').children('input').value = ''; // not working
$(this).closest('.bookingrow').children('.addressbox').children('input').value(''); // alternative - not working
});
html
<div class="row">
<div class='abc'>
<input type='text' class='unknown' />
</div>
<div class="clickhere">hide</div>
</div>
my target is if i click the "clickhere" class, content under "abc" class will hide and whatever content added by customer on those input box, they will be clear.
same html used multiple time on the same form. that's why using "$(this)".
any solution? what i am doing wrong?
Thanks in advance.
You need to use .val() to set the value, jQuery methods normally will return a jQuery object not a dom element reference so you would not have a properly called .value.
$(this).closest('.row').find('.abc input').val('');
So
$('.clickhere').click(function (e) {
e.preventDefault();
//cache the value of .row since it is used multiple times
var $row = $(this).closest('.row');
$row.children('.abc').hide(); // working
$row.find('.abc input').val('');
});
I have following code
<div id = "fa10_holder">
<div id = "b-1"></div>
</div>
I am adding this dynamically in a div that holds all of these type of divs ..
lets say if I add another div it would be like this
<div id = "fa11_holder">
<div id = "b-2"></div>
</div>
Now the problem is when I click the div with id of b-1 or b-2 and so on I want the id of its parent like fa10_holder and the id of the clicked div aswell... can any one help me ??
Like this working demo another way.
APIs:
parents - http://api.jquery.com/parents/
attr or prop - http://api.jquery.com/attr/ or http://api.jquery.com/prop/
I have added extra class, in case you have many div you can have a blanket click via class. :)
Extra: When to access the attribute (vs the property)?
code
$(document).ready(function () {
$(".hulk").click(function () {
alert($(this).parents('div').attr('id'));
alert($(this).attr('id'));
});
});
html
<div id = "fa11_holder"> parent
<div id = "b-2" class="hulk">hulk</div>
</div>
var thisid = this.id;
var parrentid = $(this).parent().attr('id');
I'm trying to get the ID from the next element, but i get this - "undefined"...
What am i doing wrong?
http://jsfiddle.net/84x9v/
HTML:
<a class="col" onclick="getId()">
<div id="1"><span>1</span></div>
</a>
JavaScript:
function getId(){
var get = $(this).next("div").attr("id");
alert(get);
}
remove the inline js
<a class="col">
<div id="1"><span>1</span></div>
</a>
and use an event handler
$('.col').on('click', function() {
var get = $(this).find("div").prop("id");
alert(get);
});
note that putting a block element inside an anchor generally isn't very good practice, and the div is a child of the anchor, it's not the next sibling.
'cause it's not the 'next' element.
function getId(){
var get=$(this).find("div").attr("id");
alert(get);
)
should work...
You're using jQuery and .next() wrong. Remove the inline event handler, use .find() instead of .next(), and try:
function getId() {
var get = $(this).find("div").attr("id");
alert(get);
}
$('a').click(getId)
jsFiddle example
I'm trying to achieve something inside a function, to actually access the parent selector.
Here is a small snippet of my HTML code:
<div class="module-row module-tab pull-right" id="modtab-sql_net">
<img src="images/icons/icon-orangebox-plus.png" class="modtab-toggle">
</div>
<div id="tab-module-row-1">
</div>
<div class="module-row module-tab pull-right" id="modtab-sql_dss">
<img src="images/icons/icon-orangebox-plus.png" class="modtab-toggle">
</div>
<div id="tab-module-row-2">
</div>
Here is the jQuery script I tried:
$('div[id^="modtab-"]').click(function(){
$(this).next('div[id^="tab-module-row"]').toggle(function(){
$(this).next('.modtab-toggle').toggle_switch.attr("src").replace("plus", "minus");
// The above line is incorrect. I need to change img attr for the class which is inside the div being clicked
});
});
Now, I want to actually change the image icon from a "plus" to a "minus" (the filenames are kept such).
I need to change $(this).next('.modtab-toggle') in the code to something that can work.
Please do NOT suggest to simply access the class using $('.modtab-toggle') as I have multiple such div tags in the code. It won't work out that way.
Thanks for any help.
Try this:
$('div[id^="modtab-"]').click(function(){
$(this).find('.modtab-toggle').attr("src", function(i, attr){
var o = this.src.indexOf('plus') > -1 ? this.src.replace('plus', 'minus') : this.src.replace('minus', 'plus');
return o;
});
});
See the Demo # Fiddle
try something like this
$('div[id^="modtab-"]').click(function(){
var $this = $(this);// clicked div
$this.next('.tab-module-row').toggle(function(){
$this.find('.modtab-toggle').toggle_switch.attr("src").replace("plus", "minus");
});
});
Note: you should use class instead of id because it should be unique
#tab-module-row ->.tab-module-row
EDITED ANSWER
$('div[id^="modtab-"]').click(function(){
var $this = $(this);// clicked div
$this.next('div[id^="tab-module-row"]').toggle(function(){
var img = $this.find('.modtab-toggle'); // your image object
// your condition to check which image to display will goes here.
});
});
change $(this).next('.modtab-toggle') to $(this).find('.modtab-toggle') to make it work.
See find() docs here