I have code
<div class="row1">
<em>My text</em>
</div>
How can I make a link like:
<div class="row1">
<em>My text</em>
</div>
I understand that the issue is a primitive but can not find the same simple solution.
You can use contents() with wrapAll():
$(".row1 em").contents().wrapAll("<a href='/mylink'></a>");
$('.row1 em').html(function(i, contents) {
return '' + contents + '';
});
or
$('.row1 em').contents().wrapAll('<a href="/mylink" />');
you can try this-
$(".row1 em").contents().wrapAll("<a href='/mylink'></a>")
$('.row1 em').html().wrap('<a href="/mylink">');
If your aim is to hyperlink the text, and you can afford alternate solutions, following achieves the same:
HTML:
<div class="row1">
<em>My text</em>
</div>
CSS:
.row1 {
cursor:pointer;
}
JS:
$('.em').click(function() {
location.href = '/mylink';
});
Example:
$('.row1 em').wrap('<a href="/mylink" />');
Update: Since this will wrap the <a> tags around <em> instead its contents, the correct way is to use $('.row1 em').contents().wrap('<a href="/mylink" />'); as Frederic stated
Related
I faced the same problem as that is mentioned by Matt but it is little different. I am trying to get height of a div but every time I get null.
HTML:
<div id="main" class="box-main " style="display:block">
<div class="box_content" style="position:absolute;top:0px;bottom:0px;height:453px;width:100%;padding-left:5px;padding-bottom:2px;">
<div style="min-width:200px;min-height:41px;padding-top:8px" id="ass-1415241823647 item-97"><div class="box">
<div class="new-try item_message" title="ram"><div class="pp"><img src="images/try.jpg" class="avatar " width="40" height="40"></div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
</div>
</div>
</div>
JavaScript:
$(document).ready(function(){
alert($("#ass-1415241823647 .item_message").height());
});
I tried this too but it didn't work.
$(document).ready(function(){
alert($("#main .box_content #ass-1415241823647 .box .item_message").height());
});
ass-1415241823647 item-97 you can't have two id's remove one or try using class if u really want to
You don't seem to have any elements in your markup matching the selector #ass-1415241823647 .item_message" so it's unable to locate it.
Isn't the result of $("#ass-1415241823647 .item_message") empty jQueryObject? length 0?
.. id="ass-1415241823647 item-97">..
value of id attributes was wrong.
Try this using jquery:
$(document).ready(function(){
alert($(".item_message").css("height"));
});
Hope this helps.
My Html looks like
<h3>Story Title
<img class="expandstory" src="/images/plus.png" /></h3>
<div class="description">Short description about the story</div>
<h3>Story Title
<img class="expandstory" src="/images/plus.png" /></h3>
<div class="description">Short description about the story</div>
My jquery looks like
$('.description').hide();
$('.description:first').show();
$('.expandstory:first').attr('src','/images/minus.png');
$('.expandstory:first').addClass('collapsestory');
$(".expandstory").click(function() {
if($(this).attr('class')=='expandstory') {
$(".description").slideUp(500);
$(this).parent().nextAll('.description:first').slideToggle(500);
$(this).attr('src','/images/minus.png');
$(this).addClass('collapsestory');
$(this).removeClass('expandstory');
}
else {
$(".description").slideUp(500);
$(this).attr('src','/images/plus.png');
$(this).addClass('expandstory');
$(this).removeClass('collapsestory');
}
});
I am making a simple thing more complex and more over this is not working when I expand/collapse the div multiple times.
I cannot change the HTML file. Please provide me good solution in jquery. Thanks in advance.
It's hard to understand what you mean when you say it's 'not working'. But you mention that it stops working when you expand/collapse <div>s multiple times, which leads me to believe you have animation queue issues, which can be solved using stop().
Try this:
$('.description').hide();
$('.description:first').show();
$('.expandstory:first').attr('src','/images/minus.png');
$('.expandstory:first').addClass('collapsestory');
$(".expandstory").click(function() {
if($(this).attr('class')=='expandstory') {
$(".description").stop(true,false).slideUp(500); //Here..
$(this).parent().nextAll('.description:first').stop(true,false).slideToggle(500); //Here..
$(this).attr('src','/images/minus.png');
$(this).addClass('collapsestory');
$(this).removeClass('expandstory');
}
else {
$(".description").stop(true,false).slideUp(500); //And here..
$(this).attr('src','/images/plus.png');
$(this).addClass('expandstory');
$(this).removeClass('collapsestory');
}
});
HTML
<h3>Story Title
<img class="expandstory" src="/images/plus.png" /></h3>
<div class="description hide">Short description about the story</div>
<h3>Story Title
<img class="expandstory" src="/images/plus.png" /></h3>
<div class="description hide">Short description about the story</div>
CSS:
.show
{
display:block;
}
.hide
{
display:none;
}
jQuery:
$('.expandstory').click(function(){
$(this).parent().next('.description').toggleClass('show hide');
});
Something like this.. http://jsfiddle.net/writetobhuwan/XqauU/
I believe he is looking for something like :
$('h3').next('.description').hide();
$('h3').first().next('.description').show();
$('h3').click(function(){
$(this).find('img').toggleClass('.expandstory');
$('.description').stop().slideUp(500);
$(this).next('.description').stop().slideDown(500);
});
fiddle
Something like this should work:
$('img.expandstory').click(function() {
var $this = $(this);
var $div = $this.parent().next();
$('img.expandstory').not($this).prop('src', '/images/plus.png');
$('div.description').not($div).slideUp(500);
$this.prop('src', ( $div.is(':visible') ? '/images/plus.png' : '/images/minus.png' ));
$div.slideToggle();
});
Here's a fiddle
Note: In the fiddle I've modified the alt property of the image just so that you can see that it changing.
I have a div which I'm replacing with a textarea like:
var $targetDiv = $('#the-div');
var $newDiv = $('#the-new-div');
$targetDiv.replaceWith($newDiv);
Which would turn:
<div id="the-div"></div>
into:
<div id="the-new-div"></div>
How would I wrap <div id="the-new-div"></div> in a div called <div id="the-new-div-wrapper">?
So the outcome would become:
<div id="the-new-div-wrapper">
<div id="the-new-div">
</div>
</div>
$targetDiv.replaceWith($newDiv).wrap('<div id="the-new-div-wrapper"' />')
doesn't seem to work.
Do the wrapping first
$targetDiv.wrap('<div id="the-new-div-wrapper" />').replaceWith($newDiv);
Or make it in two lines:
$targetDiv.replaceWith($newDiv);
$newDiv.wrap('<div id="the-new-div-wrapper" />');
Fiddle
There's also a typo in your code: $targetDiv.replaceWith($newDiv).wrap('<div id="the-new-div-wrapper"' />') There is an additional apostrophe, which shouldn't be there.
try this
$targetDiv.replaceWith($newDiv.wrap('<div id="the-new-div-wrapper"' />'));
it would actually wrap the div before the lot replace the target div but will achieve the same result.
See here
http://jsfiddle.net/WgW6Y/
The code below works, but I suspect there is be a cleaner.
Any alternative to reference the selector names, specially the first differently?
jQuery
$(".add_one_more").click(function(){
var themsg = $(this).parent().attr('id');
$('"#'+themsg+'"').stop().fadeOut("slow",function(){
$("#entry_area").stop().fadeIn("slow");
});
return false;
});
HTML
<div id="entry_area">Form Goes Here</div>
<div id="msg0">
<span style="font-size: 130%; color: green;">One Message</span>
Try Again
</div>
<div id="msg1" style="width: 550px;">
<span style="font-size: 130%; color: red;">Another Message</span>
Try Again
</div>
You shouldn't need to select the parent and get its ID.
$(".add_one_more").click(function(){
$(this).parent().stop().fadeOut("slow",function(){
$("#entry_area").stop().fadeIn("slow");
});
return false;
});
I like quite a bit of what you're doing, but I'll add my thoughts on making your js more resilient to getting pieces moved around.
JS
$("#entry_area, div.message").bind("stop", function(evt){
$(this).stop().fadeIn("slow");
} );
$(".add_one_more").click(function(evt){
$(this).closest("div.message").trigger("stop");
$("#entry_area").trigger("stop");
return false;
});
html
<div id="entry_area">Form Goes Here</div>
<div id="msg0" class="message">
<span style="font-size: 130%; color: green;">One Message</span>
Try Again
</div>
<div id="msg1" class="message" style="width: 550px;">
<span style="font-size: 130%; color: red;">Another Message</span>
Try Again
</div>
Actually, I'd say you don't need to store the id if you don't re-use it after all, try:
$(".add_one_more").click(function(){
var $parent = $(this).parent();
$parent.stop().fadeOut("slow",function(){
$("#entry_area").stop().fadeIn("slow");
});
return false;
});
or even shorter without storing the jquery object in a var ([EDIT] This is exactly what Daniel posted while I was writing this).
How about
var themsg = $(this).parent();
themsg.stop() ...
In the HTML below, I would like to copy the "submittedby" beside "message", within the H2 tag:
<div class="comment">
<H2 class="threadtitle">Message 1</h2>
<span class="submittedby">James</a>
</div>
<div class="comment">
<H2 class="threadtitle">Message 2</h2>
<span class="submittedby">Bill</a>
</div>
<div class="comment">
<H2 class="threadtitle">Message 3</h2>
<div class="submittedby">Phil</a>
</div>
My current jQuery code is as follows:
$(document).ready(function() {
$('.submittedby').copy().appendTo('.threadtitle');
});
The problem is this copies EVERY "submittedby" to EVERY "threadtitle". How do I code it so it only copies the "submittedby" from within the same "comment" div?
Thanks!
Use .each() here, like this:
$(function(){
$('.submittedby').each(function() {
$(this).clone().appendTo($(this).siblings('.threadtitle'));
});
});
This loops over each .submittedby element, and moved it around with respect to the current .submittedby you're on in the loop, so each one's handled individually. Also I assumed you meant .clone() here, but if you're actually using the .copy() plugin, just replace .clone() with .copy() in the code above.
$('.submittedby').each(function() {
$(this).prev('.threadtitle').append($(this).html());
});
$('.submittedBy'.each(function() {
var $sb = $(this);
$sb.copy().appendTo($sb.closest('.comment').find('h2.threadtitle'));
});
When you use .each() you get to have code run for each element processed.
edit thanks #Nick
$(document).ready(function(){
$('span.submittedby, div.submittedby').each(function() {
self = $(this);
self.before(self.clone());
});
});
Obligatory example
Try to limit by parent:
$(document).ready(function(){
$('.submittedby:parent').each(function(){
$(this).find('.submittedby').copy().appendTo('.threadtitle');
})
});