Rearranging the order of divs in an RSS using jQuery - javascript

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.

Related

Hide div if under ordered list with class

I am trying to hide a div that displays comment info if the comment is a child.
In the code below I am trying to make it so if "ol" has class of "children" then the div inside with the id "info" will be hidden.
Also open to other ways of hiding the div if the the comment is a child.
<ol class="children">
<li class="comment byuser comment-author-1 bypostauthor odd alt depth-2" id="comment-325" itemprop="review" itemscope itemtype="http://schema.org/Review">
<article id="comment-325" class="comment row">
<header class="comment-author vcard col-md-2 col-sm-3 col-xs-12">
<section class="comment-content comment col-md-10 col-sm-9 col-xs-12">
<div class="comment-meta"></div>
<div itemprop="reviewBody">
<div class='edit-comment-admin-links-no-icon ' id='edit-comment-user-link-325' style='background:none'>
<div style='display:none'>
<p>asdsadasdsadasasdasdas
<div id="info" class="cio-display cio-display-0">
<div class="cio-display-start-new-row"></div>
<div class="cio-label cio-label-service-provided">Service Inquired About:</div>
<div class="cio-field cio-field-service-provided">Buy/Sell Commercial</div>
<div class="cio-display-start-new-row"></div>
<div class="cio-label cio-label-deal-completed">Deal Completed?</div>
<div class="cio-field cio-field-deal-completed">Yes</div>
<div class="cio-display-start-new-row"></div>
<div class="cio-label cio-label-date-of-service">Date Of Service:</div>
<div class="cio-field cio-field-date-of-service">2015</div>
</div>
</div>
</div>
</div>
</section>
</header>
</article>
</li>
</ol>
Considering the code you posted, this is the CSS code that you need:
ol.children #info {
display: none;
}
However, assuming you have more than one of these comments, I have to add the following note:
Passing the same id to more than one element in your page is not a good idea. Ids should be unique identifiers of HTML elements. You should use a class for your purpose.
Now, assuming your to-be-hidden elements will always be wrapped in elements with itemprop="reviewBody", this is what you should use to hide them on ordered lists of comment that have the class children:
ol.children [itemprop="reviewBody"] {
display: none;
}
Here's the "cleaned up" version of your code:
<ol class="children">
<li class="comment byuser comment-author-1 bypostauthor odd alt depth-2" id="comment-325" itemprop="review" itemscope itemtype="http://schema.org/Review">
<article id="comment-325" class="comment row">
<header class="comment-author vcard col-md-2 col-sm-3 col-xs-12">
<section class="comment-content comment col-md-10 col-sm-9 col-xs-12">
<div class="comment-meta"></div>
<div itemprop="reviewBody">
<div class='edit-comment-admin-links-no-icon ' id='edit-comment-user-link-325' style='background:none'>
<div class="cio-display cio-display-0">
<div class="cio-display-start-new-row"></div>
<div class="cio-label cio-label-service-provided">Service Inquired About:</div>
<div class="cio-field cio-field-service-provided">Buy/Sell Commercial</div>
<div class="cio-display-start-new-row"></div>
<div class="cio-label cio-label-deal-completed">Deal Completed?</div>
<div class="cio-field cio-field-deal-completed">Yes</div>
<div class="cio-display-start-new-row"></div>
<div class="cio-label cio-label-date-of-service">Date Of Service:</div>
<div class="cio-field cio-field-date-of-service">2015</div>
</div>
</div>
</div>
</section>
</header>
</article>
</li>
</ol>
Please note that the above code will hide the review body section of all the comments in your list if the list has the class children, including the top level ones. If an ordered list has even one children, it will probably have the class children added to it by WordPress.
If you only want to hide the review body section on level 2 comments (or higher) but keep them visible on level 1 comments, and assuming these level 1 comments have the added class of level-1 (I'm guessing, since you didn't show us a level 1 comment) , this is the CSS you should use:
ol.children>li:not(.level-1) [itemprop="reviewBody"] {
display: none;
}
Try $('ol.children #info').hide();
Expounding from Kyle Emmanuel's answer, try to use this jQuery selector
$('ol.children div[id="info"]').hide();
Use the div[id="info"] selector if you're looking for divs with info as id. The #info selector will only return the first DOM element with info as ID, which should be fine anyway since you should only alot unique IDs to your elements.

Get parent div recursively

I have this HTML
<div id="main-container">
<div style="style-here" data-status="active" data-state="loaded">
<div style="style-here">
<div style="style-here" {{click_event}}></div>
</div>
</div>
<div style="style-here" data-status="active" data-state="unloaded">
<div style="style-here">
<div style="style-here" {{click_event}}></div>
</div>
</div>
<div style="style-here" data-status="inactive" data-state="unloaded">
<div style="style-here">
<div style="style-here" {{click_event}}></div>
</div>
</div>
</div>
On click on one of the elements that has {{click_event}} I want to search recursively till I can find an element that has data-status or data-state, and in the worst case when I meet the id from top to stop de search.
The HTML is made generated from another JS file and I can't change the way is made it. Is there a way with closest or parent from jQuery to search after data attribute?
Thank you.
No need for recursion, you can use closest():
$clickedElement.click(function() {
var $parent = $(this).closest('[data-status], [data-state], #main-container');
});

Cannot select the last element with class name : JQuery

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

How i can select specific div from multiple divs in jquery

I have something like this, and i need to show every div called "plink" just in the main div of each parent, so i tried to fadeIn ".plink" but its doing the same function for all the divs of "plink"
<script>
$(document).ready(function(){
$('.plink').hide();
$('.project').mouseover(function(){
$(this).next('.plink').fadeIn(400);
});
$('.project').mouseleave(function(){
$(this).next('.plink').fadeOut(200);
});
});
</script>
<div class="project">
<div class="plink">
<div class="go"></div>
<div class="goplus"><img src="images/more.png" border="0"/></div>
</div>
<div class="pic"><img src="images/portfolio_pic2.png" border="0" alt="projectname"/></div>
<div class="title">Test1</div>
</div>
<div class="spacer_project"></div>
<div class="project">
<div class="plink">
<div class="go"></div>
<div class="goplus"><img src="images/more.png" border="0"/></div>
</div>
<div class="pic"><img src="images/portfolio_pic.png" border="0" alt="projectname"/></div>
<div class="title">test2</div>
</div>
You can use find() instead of next()...
$(this).find('.plink').fadeIn(400);
because this is your .project div then you need to "find" the child elements that you are looking for. Using next() means you will get the very next element if it matches the selector (i.e. it is check to see if the next .project div matches the .plink selector)
I would go the FIND route like musefan suggested. Here is the solution code:
http://jsfiddle.net/bx7YC/
<div class="project">
<div class="plink">
<div class="go">go</div>
<div class="goplus">goplus</div>
</div>
<div class="pic">pic</div>
<div class="title">Test1</div>
</div>
<div class="spacer_project"></div>
<div class="project">
<div class="plink">
<div class="go">go</div>
<div class="goplus">goplus</div>
</div>
<div class="pic">pic</div>
<div class="title">Test2</div>
</div>​
$('.plink').hide();
$('.project').mouseover(function(){
$(this).find('.plink').fadeIn(400);
});
$('.project').mouseleave(function(){
$(this).find('.plink').fadeOut(200);
});​
I replaced the broken img links with simple text for the jsfiddle.

jQuery UI sortable’s serialize method excludes one item

I am using jQuery UI sortable for a list of elements on a page whose order I want to save in the database every time it’s changed.
However, I’m experiencing a weird bug (it seems to me like one): both the serialize and toArray methods always exclude one item from the produced serialised string (or array). That always is the item being currently dragged. Which means the order is never actually tracked properly.
Here’s an example of my javascript:
$('.setContent').sortable({change:
function(event, ui) {
// Serialise the new order
var newOrder = $('.setContent').sortable('serialize');
// Add the current set id and the action name
newOrder += '&setId='+currentSet+'&action=usrStuff:changeCardsOrder';
// Send the data to the server
$.post('ajax.php', newOrder);
}
});
And the HTML:
<div class="setContent>
<div class="cardSmall" id="card_5">
<div class="hanzi">俄国</div>
<div class="meaning">Russia</div>
</div>
<div class="cardSmall" id="card_4">
<div class="hanzi">韩国</div>
<div class="meaning">Korea</div>
</div>
<div class="cardSmall" id="card_6">
<div class="hanzi">中国</div>
<div class="meaning">China</div>
</div>
<div class="cardSmall" id="card_12">
<div class="hanzi">日本</div>
<div class="meaning">Japan</div>
</div>
<div class="cardSmall" id="card_13">
<div class="hanzi">德国</div>
<div class="meaning">Germany</div>
</div>
<div class="cardSmall" id="card_17">
<div class="hanzi">巴西</div>
<div class="meaning">Brasil</div>
</div>
<div class="cardSmall" id="card_14">
<div class="hanzi">法国</div>
<div class="meaning">France</div>
</div>
<div class="cardSmall" id="card_19">
<div class="hanzi">美国</div>
<div class="meaning">America</div>
</div>
<div class="cardSmall" id="card_16">
<div class="hanzi">英国</div>
<div class="meaning">England</div>
</div>
</div>
So, in this case, there are nine items in the list. But the sortable method will only return information about eight.
So how do I fix this?
You probably want the update event, not the change event.
change fires during sorting whenever the ordering of the items in the DOM changes, even if the user hasn't let go of the item they're moving. update fires after the user has changed the order of the sortable elements.

Categories