I have this code:
<li><div class="review-item">
<div class="review-item-thumb"><img width="60" height="60" src="/content/members/av/flags/por-av.png"></div>
<h5>Player <small> Member </small></h5>
<div align="center"></div><font class="fdescrip">No Description!</font></div>
<ul><li><table class="descrip"><tbody><tr><td>
<p><font class="fdescrip">No complete description available.</font></p>
</td></tr></tbody></table></li></ul></li>
I want to remove the font class="fdescrip" under div class="review-item" ONLY. I can make both of them dissapear (with $('tag').removeAttr("class");)but not just one of them as I don't want the second one<p><font class="fdescrip">No complete description available.</font></p> to be removed.
Any help will be very appreciated!
Thanks.
Removes just the CSS class:
$('.review-item > .fdescrip').removeClass('fdescrip');
Removes element from DOM:
$('.review-item > .fdescrip').remove();
Clears the elements content if it's only plain text but leaves it in the DOM:
$('.review-item > .fdescrip').text('');
$(".review-item .fdescrip").removeClass('fdescrip');
You can select the first child using,
$('div.review-item .fdescrip:first-child').removeAttr('class');
This way, the jQuery will be applied to the first fdescrip in the div of review-item and not to any other!
Here is a fiddle for this: http://jsfiddle.net/afzaal_ahmad_zeeshan/Vw7Q8/
Fiddle doesn't remove the class, but it adds there! So you can change it to removeAttr.
Reference:
http://api.jquery.com/first-child-selector/
Related
I have this html structure (refer below)
<div class="pagination_info"></div>
<div class="pagination_numbers"></div>
Now, what I want is to add a start div tag before the .pagination_info div and add end div tag after the .pagination_numbers div so the expected output must be (refer below)
<div class="pagination_wrapper">
<div class="pagination_info"></div>
<div class="pagination_numbers"></div>
</div>
what I tried so far is (refer below)
$('.pagination_info').before('<div class="pagination_wrapper">');
$('.pagination_numbers').after('</div>');
so supposedly, what im trying to achieve is to wrap the .pagination_info div and .pagination_numbers with a parent div that has a class name "pagination_wrapper" but sadly unsuccessful yet. Any help, suggestion, recommendation, ideas, clues to make this work will be greatly appreciated. Thank you.
jQuery has a wrapAll method:
$(".pagination_info, .pagination_numbers").wrapAll("<div class=\"pagination_wrapper\">");
Working Example
.wrapAll() will wrap the two div's around the new div:
$(".pagination_info, .pagination_numbers").wrapAll("<div class='pagination_wrapper'>");
FIDDLE
Good Day.
Actually it is the wordpress site but i need the general solution using jquery(if feasible)
I trying to remove the tag next to end of the div.
See I am using the div as like here
<div class="one_third">
<p>This is for testing</p>
</div>
<br> <!--This one -->
<div class="one_third">
</div>
<br><!--This one -->
<div class="one_third">
</div>
<br><!--This one -->
In the above example i am using the class of one_third in a div inside this div i am using br tag too. But all i am want to remove the br tag which is in outside the div i mean in the end of the div in jquery.
</div>
<br>
I am not sure how to do this in jquery (Actually i try with wordpress disable wpautop is removing the br tag which is inside the div too (I don't want to remove the br tag inside the div only outside the div i mean end of the div )).
Any suggestion would be great :)
Thanks,
vicky
You should just place the HTML on one line.
wpautop inserts <br> on newlines, so placing the HTML code on one line avoids the entire issue.
<div class="one_third"><p>This is for testing</p></div><div class="one_third"></div><div class="one_third"></div>
The way you structure the markup is everything when wpautop is enabled.
It is the next sibling of the element with class one_third
$('.one_third').next('br').remove()
Demo: Fiddle
A non JavaScript solution would be a simple CSS sibling selector
.one_third + br {
display : none;
}
If you really want to use jQuery, you can use the same selector and use remove()
$(".one_third + br").remove();
You can use next() and remove() methods in jQuery for that
$(".one_third").next('br').remove();
This question is the continuation of I created textarea expander from script but after, it doesn't expands
Because i create a table with the textarea and i want call the plugin textarea.
Calling after the appendTo with jQuery("textarea[class*=expand]").TextAreaExpander();
I searching all the textarea with class="expand" and working.
How to edit this sentence for working only one div's interest?
Assuming your structure is like this:
<div id="parent">
<textarea class="expand"></textarea>
</div>
You can simply do this:
$('#parent > textarea[class*=expand]');
> is the child selector and #idselects the element with the given id.
Edit
As #VijayVerma stated in the comments: If your <div> doesn't have an ID yet, just add the ID to the textarea instead:
<textarea id="onlyme" class="expand"></textarea>
And select it with the ID-selector only:
$('#onlyme');
If your <div>s already have IDs, you're fine with the first solution I've posted.
give the div an id..let say
<div id="YourId"><textarea>..</textarea></div>
jQuery("#YourID > textarea[class*=expand]").TextAreaExpander();
I have searched a lot and couldn't found the approach to create the small text box right next to the cursor, when doing hover over on HTML object.
Example http://guyzyl.org/wp/Picture1.png
You can see cursor is not visible in this example, but the text box appears on hover over. I would like to create some thing similar.
Example is taken from the Facebook.
Thanks for the help
tooltips can be obtained on tags adding the title attribute to them, e.g.:
my link
fancier looking tooltips can be obtained using javascript but the above is the correct semantic option (many tooltip plugins expect it to be in your code anyway)
Use this :
<img title="my tooltip" src="" alt=""/>
It's called tooltip. write like this for example:
<div class="parent">
<p>create group</p>
<div class="tooltip">tooltip</div>
</div>
CSS
.tooltip{
display:none;
}
.parent:hover .tooltip{display:block;}
Check this http://jsfiddle.net/zDLzF/
There are many fancy tooltips available. The Simplest jQuery Tooltip Ever - http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
I have the following code:
<a class="button" href="javascript:ShowHide('elaborate_1')" style="font-size:24px; padding:0 10px; margin-left:10px;">COLLAPSE</a>
<div id="elaborate_1" class="expandable-box" style="display:none;">
<div class="description"><?php //USE THIS CLASS 'description' ON A 'div' TAG FOR A GRAY BOX TO DISPLAY CONTENT ?>
<p class="nomargin nopadding">HELLO</p>
</div><!-- .descpription -->
</div>
The web page currently hides this message "hello" until I click "COLLAPSE" however I want the content to be shown automatically until I click "collapse.
How can I do this?
Change the display:none to display:block on your elaborate_1 div.
Remove the display:none from the containing element:
<div id="elaborate_1" class="expandable-box">
If your ShowHide function is correct, it should work just like that. If not, you should post the code from the function.
Just remove style="display:none;" from your html element
and add following code to your js function (for reference)
document.getElementById("elaborate_1").style.display = "block";
Personally I would suggest taking a look at JQuery. It allows you to take advantage of controlling various effects, like show, hide, toggle, fade, and custom animation, etc. Here is the link: http://api.jquery.com/category/effects/ which might be useful to you.
A little Jquery sample code:
$('a.button').click(function(){
$('#elaborate_1').toggle("slow");
});