In my webpage I have divs with same class name message_box vlistngbox item. I am calling an ajax function in the scroll event of page and I want to append the response after the last div with class message_box vlistngbox item.
I tried with,
$("#masnrycontainer .message_box vlistngbox item:last").after(response);
But it is not getting appended as it failed to choose the last div with class name message_box vlistngbox item. Can anyone help me to select the last div ?
I am sharing the part of my HTML code below:
<div class="main_content_wrapper">
<div class="mainpading">
<div class="mainwraper main_msnry">
<div class="left_wrapper">
<div class="inside_left_wrapper">
<div class="user_accountlinks">
<!-- I have menus in my page here -->
</div>
<div class="useracntmenuresponsive"><i class=" ico_color2 fa fa-list"></i></div>
<!-- for Responsive Menu Ends -->
</div>
</div>
<div class="main_content_wraper">
<div class="inside_mainconatinerwrap">
<div class="msnry" id="masnrycontainer">
<div class="message_box vlistngbox item">
<!-- Content -->
</div>
<div class="message_box vlistngbox item">
<!-- Content -->
</div>
<div class="message_box vlistngbox item">
<!-- Content -->
</div>
</div>
</div>
</div>
</div>
</div>
Thanks in advance.
You have multiple classes in same element.selector for last item would be .message_box.vlistngbox.item:last.You need to use:
$("#masnrycontainer .message_box.vlistngbox.item:last").after(response);
You probably missed . before item and vlistngbox for class selector. Also remove remove the space between these classes to select element with all these classes.
$("#masnrycontainer .message_box.vlistngbox.item:last").after(response);
use last
$('.message_box').last().html();
this will select last div html ....you can do any thing with this div now
Related
I need to rearrange the div order of an RSS. Each item has 3 divs. I will need to move the div with the class "itemDate" before the div with the class "itemTitle" (see markup below). Should I use the function .each(); is there a jQuery out of the box solution for this or do I need to write my own function?
<div id="RSS">
<div class="col-md-3 item">
<div class="itemTitle"></div>
<div class="itemDate"></div>
<div class="itemContent"></div>
</div>
<div class="col-md-3 item">
<div class="itemTitle"></div>
<div class="itemDate"></div>
<div class="itemContent"></div>
</div>
<div class="col-md-3 item">
<div class="itemTitle"></div>
<div class="itemDate"></div>
<div class="itemContent"></div>
</div>
</div>
There is a function in jQuery called prependTo, which moves a element to the beginning of a given target. Check it out the example below.
$('.itemDate').each(function(){
$(this).prependTo($(this).parent());
});
This code just move every itemDate into the beginning of every respective parent.
I am trying to do select an anchor from one div to another using next() , shiblings(), parents(), parent() etc jquery functions
Here is an example of html
<div class="thumbs">
<div class="section">
<div class="wrap">
HOme
</div>
</div>
<div>
<div class="thumbs">
<div class="section">
<div class="wrap">
about
</div>
</div>
<div>
i want to get the second link.Suppose my current link is link.php and when i click th next button i want to get next link2.php link
You need to use:
$('[data-selector="ajax"].current')
.closest('.thumbs')
.next()
.find('a')
.attr("href"); // will return link2.php
I'm quite new to jQuery and I have come up with script which affects the HTML below. The script works perfectly and I have gotten it to whether I would like. The problem I am having
is when I'm duplicating the HTML and the script, once clicked, only shows the last project-info and project-images within the document. I've tried quite a few different methods just as
$(this).children()
but I can't seem to get any to work. Any help would be much appreciated.
Thank you
jQuery
$(document).ready(function() {
$('.apple').click(function() {
$('#darken').addClass('dark');
$('.project-info').delay('1000').slideDown('slow');
$('.project-images').delay('1000').fadeIn('slow');
});
});
$(document).ready(function() {
$('.close').click(function() {
$(".project-info, .project-images").fadeOut('slow');
});
});
HTML
<div class="apple">
<img src="http://mybroadband.co.za/photos/data/500/apple-logo.jpg"/>
</div>
<div class="project-info" style="display:none;">
<div class="project-title">
<h1>hello world</h1>
</div>
<div class="details">
<p>dkusdufhu suskueh sukh suefhuksdfnkuesnfukneukf nseuknfukenfuk nukefnuksn fukfuksukfnuksenf unseukfunfukfunufen u u u ef euhfuehfeufu g gfd gerjkg rjgrjg j js grg rgsg dkusdufhu suskueh sukh</p>
<div class="links">
link
</div>
<div class="close"></div>
</div><!-- end of project info -->
</div>
<div class="project-images" style="display:none;">
<div class="-images">
<img src="http://cdn4.spiegel.de/images/image-499233-galleryV9-grcy.jpg" />
<img src="http://cdn4.spiegel.de/images/image-499233-galleryV9-grcy.jpg" />
</div>
<div class="close end"></div>
</div> <!-- Project Images -->
</div> <!-- # Darken -- >
You're nearly there. Children wouldn't work in the above example because the divs with class 'apple' don't have any children. You need to move that first closing tag to the bottom of the portfolio item so that your html for each portfolio item is structured like this:
<!--PORTFOLIO ITEM-->
<div class="apple">
<!-- ICON GOES HERE-->
<img src="http://mybroadband.co.za/photos/data/500/apple-logo.jpg"/>
<!-- PROJECT INFO GOES HERE-->
<div class="project-info" style="display:none;">
</div>
<!-- PROJECT IMAGES GOES HERE-->
<div class="project-images" style="display:none;">
</div>
</div>
I.e. the divs with classes 'project-info' and 'project-images' are inside the 'apple' div. Then change this:
$('.project-info').delay('1000').slideDown('slow');
$('.project-images').delay('1000').fadeIn('slow');
to this:
$(this).children('.project-info').delay('1000').slideDown('slow');
$(this).children('.project-images',this).delay('1000').fadeIn('slow');
If you've updated your html correctly, $(this) will be pointing to a div element that does indeed have children with classes 'project-info' and 'project-images'. Here's an updated JSFiddle that should do you what you want: http://jsfiddle.net/8k3Ms/1/
I am trying to toggle visibility on a div by clicking a button in a neighboring div. I'm using a class .expand to fire the onClick and another class .target as the target, but the problem is that every div with the .target class fires onClick, instead of just the one I want. Logically, I understand why that's happening, but I don't know how to get around it... Here is a bootply: http://www.bootply.com/oSGM0jOG6q#.
$('.expand').on('click', function(e){
$(".target").toggleClass("hidden");
$(".target").toggleClass("visible");
});
HTML
<!-- Thumbnail -->
<div class="col-sm-4">
<div class="thumbnail">
<img src="//placehold.it/400x300&text=Photo1">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Expand</p>
</div>
</div>
</div>
<!-- Big-Image -->
<div class="col-xs-12 target hidden">
<div class="thumbnail">
<img src="//placehold.it/1200x900&text=Photo1">
<div class="caption">
<h3>HighRes</h3>
<p>Close</p>
</div>
</div>
</div>
PS - I prefer to use bootstrap's hidden/visible classes for clean markup, but am not totally stuck on it.
You can use .closest() to find parent div with class col-sm-4 then use .next() to find target
$('.expand').on('click', function(e){
$(this).closest('.col-sm-4').next(".target").toggleClass("hidden visible");
});
Try to use .closest() to get the static parent, i just meant static parent as .thumbnail, since col-sm-4 this class would get change depends upon the layout, i assume. So grab the closest .thumbnail and get its parent then target the next sibling to it.
$('.expand').on('click', function(e){
$(this).closest('.thumbnail').parent().next('.target').toggleClass("hidden visible");
});
DEMO
Here is your bootply http://www.bootply.com/gk8gtlaH1L
Add a div with a new Expand wrapping both the divs. It would be easy for you :)
JS CODE
$('.newExpand').on('click', function(e){
$(this).find(".target").toggleClass("hidden");
$(this).find(".target").toggleClass("visible");
});
HTML CODE
<div class="newExpand">
<!-- Thumbnail -->
<div class="col-sm-4">
<div class="thumbnail">
<img src="//placehold.it/400x300&text=Photo1">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Expand</p>
</div>
</div>
</div>
<!-- Big-Image -->
<div class="col-xs-12 target hidden"><!-- use js to add/remove class"hidden" on button click -->
<div class="thumbnail">
<img src="//placehold.it/1200x900&text=Photo1">
<div class="caption">
<h3>HighRes</h3>
<p>Close</p>
</div>
</div>
</div>
</div>
To use a declarative approach that doesn't tie the JavaScript too heavily to the DOM structure, you could set data-target on each button element to specify the target element to be toggled when the button is clicked, and update the click handler to find the element(s) identified.
For example:
$('.expand').on('click', function(e){
var sel = $(e.target).data("target");
if (sel) {
$(sel).toggleClass("hidden");
$(sel).toggleClass("visible");
}
});
And in the HTML:
<!-- Thumbnail -->
<div class="col-sm-4">
Expand
</div>
<!-- Big-Image -->
<div id="bigImage" class="hidden">
This div will be hidden/shown when the button is clicked
</div>
Respected ppl ...
This is my markup :
<div class="row-fluid">
<div class="span12 card card-even">
<div>
<h3>Case 1</h3>
Hide the subsection
</div>
<div class = "timeline">
<div class= "circle circle-green " data-toggle="tooltip" title="Task 2 ">
<span></span>
</div>
<div class="rect-fixed"></div>
</div>
<div class="subsection"><span>Panther a</span></div>
</div> <!-- end of card 1-->
</div>
<div class="row-fluid">
<div class="span12 card card-odd">
<div>
<h3>Case 1</h3>
Hide the subsection
</div>
<div class = "timeline">
<div class= "circle circle-green " data-toggle="tooltip" title="Task 2 ">
<span></span>
</div>
<div class="rect-fixed"></div>
</div>
<div class="subsection"><span>Panther b</span></div>
</div> <!-- end of card 2-->
</div>
I have an app which generates multiple alternating cards(row-fluids) which are even/odd with a button "hiderBUTTON" to hide the div with the class=subsection
But im unable to link the button of a particular row with its corresponding subsection ....
How do i use the this keyword correctly and target a button's subsection for a given row ...
Thanks very much ....
Regards
Like this?
$('.hiderBUTTON').click(function(e){
e.preventDefault();
$(this).closest('.card').find('.subsection').toggle();
});
Use .closest() to get to the its root parent of each subsection and button parent i.e .card and the use find to get the subsection and use toggle to switch it or just use .hide() to hide it.
Demo
With text toggling b/w show/hide
$('.hiderBUTTON').click(function (e) {
e.preventDefault();
var $this = $(this);
$this.closest('.card').find('.subsection').toggle();
$this.text(function(_, text){
return text == "Hide the subsection" ? "Show the subsection" : "Hide the subsection";
})
});
Demo