I am loading a grid of news stories and want to append two DFP adverts at a particular place in the grid - which is define by a data attribute data-adposition
Here's the HTML of the divs
<div class="aggregator">
<div class="news-item"> </div>
<div class="news-item"> </div>
<div class="news-item"> </div>
<div class="news-item"> </div>
</div>
<!-- AS AN EXAMPLE I WANT TO APPEND AFTER THE 2ND AND 4TH BUT THIS COULD CHANGE -->
<div class="aggregator__dfp" data-dfpcode='<?php echo $dfpCode; ?>' data-halfcode='<?php echo $dfpHalfCode; ?>'>
<div class="dfp" data-adposition="<?php echo $dfpPos; ?>">
<h2>Test DFP ONE</h2>
</div>
<div class="dfp" data-adposition="<?php echo $dfpHalfPos; ?>">
<h2>Test DFP TWO</h2>
</div>
</div>
I am then looping through and currently using detach() to preserve the data but remove it from the document.
$(".dfp").each(function(){
var dfpHTML = $(this).detach();
var dfpPos = $(this).data("adposition");
$(selector + " .news-item").eq(dfpPos).after(dfpHTML);
});
Having no luck currently! The detach() works as it stores the data when I console.log but does no append to the position defined in the data-adposition
it works for me. what are you getting back from the php expression for data-adposition?
$(document).ready(function(){
var selector = ".aggregator";
$(".dfp").each(function(){
var dfpHTML = $(this).detach();
var dfpPos = $(this).data("adposition");
$(selector + " .news-item").eq(dfpPos).after(dfpHTML);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="aggregator">
<div class="news-item">n1 </div>
<div class="news-item">n2 </div>
<div class="news-item">n3 </div>
<div class="news-item">n4 </div>
</div>
<!-- AS AN EXAMPLE I WANT TO APPEND AFTER THE 2ND AND 4TH BUT THIS COULD CHANGE -->
<div class="aggregator__dfp" data-dfpcode='<?php echo $dfpCode; ?>' data-halfcode='<?php echo $dfpHalfCode; ?>'>
<div class="dfp" data-adposition="1">
<h2>Test DFP ONE</h2>
</div>
<div class="dfp" data-adposition="2">
<h2>Test DFP TWO</h2>
</div>
</div>
Related
I want to remove a Parent div using js or jquery but I am unable to do so because it is multiple cards made dynamically. Here is my code:
<?php
for($ter as $term)
{
<div class="wrapper-newjoinee-custom">
<div class="breadcrumbs joinee-firstchild">
<h2 class="section-heading blue-bar">
<?php
echo $term->name;
?>
</h2>
</div>
<div class="row-joinee">
<?php echo $term->data; ?>
</div>
</div>
}
?>
main.js file:
jQuery(document).live(function($) {
if ( $('.row-joinee').text().length == 0 ) {
// length is 0
$('.row-joinee').closest(".wrapper-newjoinee-custom").remove();
}
});
please help me to make display none of wrapper-newjoinee-custom class if row-joinee class is empty
You could try something like this:
$(".row-joinee").filter(
function() { return $(this).text().trim() == ""})
.closest(".wrapper-newjoinee-custom").hide()
This will hide those .wrapper-newjoinee-custom that has en empty <div class="row-joinee">
Demo
$(".row-joinee").filter(function() { return $(this).text().trim() == ""}).closest(".wrapper-newjoinee-custom").hide()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper-newjoinee-custom">
<div class="breadcrumbs joinee-firstchild">
<h2 class="section-heading blue-bar">
name
</h2>
</div>
<div class="row-joinee">
data
</div>
</div>
<div class="wrapper-newjoinee-custom">
<div class="breadcrumbs joinee-firstchild">
<h2 class="section-heading blue-bar">
name im empty
</h2>
</div>
<div class="row-joinee"></div>
</div>
<div class="wrapper-newjoinee-custom">
<div class="breadcrumbs joinee-firstchild">
<h2 class="section-heading blue-bar">
name
</h2>
</div>
<div class="row-joinee">
data
</div>
</div>
I'm trying to create 3 simple buttons w/ a shared text area. Each button will display a different message in the shared text area when clicked. I have managed to accomplish this in a codepen here. However, when I tried to implement this into my project, it behaved much differently. The buttons no longer swapped text depending on which button was pressed, and the individual indexes are no longer being correctly tracked. My guess is that its because they're deeply nested within other divs? Not sure. Basically, when you click on one of the image icons, the corresponding text above would show. Thanks so much in advance for any help. Here is my code
$('.benefit-button').first().addClass('active');
$('.benefit-button').on('click', function(){
var $this = $(this);
$siblings = $this.parent().children(),
position = $siblings.index($this);
console.log (position);
$('#blah div').removeClass('active').eq(position).addClass('active');
$siblings.removeClass('active');
$this.addClass('active');
})
div[class*="content-"] {
display: none;
}
div.active {
display: block;
}
<div class="row lt-blue-bg">
<div class="large-12 large-centered columns benefit-section">
<span class="small-11 small-centered large-7 columns info" id="benefit">
<div class="accordionWrapper">
<div id="blah">
<div class="content-1"><h2>Happy</h2></div>
<div class="content-2"><h2>Healthy</h2></div>
<div class="content-3"><h2>Money</h2></div>
</div>
<div class="accordionItem close">
<p class="accordionItemHeading">Sources<br>+</p>
<div class="accordionItemContent">
<p style="color: black;">Yes, the Tobacco Quitline is completely FREE!</p>
</div>
</div>
</div>
</span>
<span class="small-12 large-3 columns benefit-icons">
<span>
<a class="benefit-button"><img src="<?php echo get_template_directory_uri(); ?>/images/rainbowicon.png" class="circle rainbow"></a>
</span>
<span>
<a class="benefit-button"><img src="<?php echo get_template_directory_uri(); ?>/images/hearticon.png" class="circle heart"></a>
</span>
<span>
<a class="benefit-button"><img src="<?php echo get_template_directory_uri(); ?>/images/moneyicon.png" class="circle money"></a>
</span>
</span>
</div>
</div>
It's the extra <span> around the <a> that doesn't correspondend with
$siblings = $this.parent().children(),
there's also a syntax error in that line: , instead of ;.
You need
$siblings = $this.parent().parent().children();
to get from a (=this) to parent (span) to parent (span above).
I'm loading some information from a page. I want to move some of the content around and then load it up to a div in the corrected order. Here's what I mean. Imagine this is the content on the page being called:
<div class="wrapper">
<div class="product">some text
<div class="item" id="234"></div>
<div class="description>More text</div>
</div>
<div class="product">some text
<div class="item" id="3343"></div>
<div class="description">More text</div>
</div>
</div>
These are just showing two products, but imagine it's 30 or so products. Now when I load the page using an ajax call, I want to re-arrange some of the content before I place it in a div. My new content should look like this:
<div class="wrapper">
<div class="product">some text
<div class="description>More text
<div class="item" id="234"></div>
</div>
</div>
<div class="product">some text
<div class="description">More text
<div class="item" id="3343"></div>
</div>
</div>
</div>
So I took the "item" class and moved it into the description class. How do I accomplish this for all the products? It would look something like this I suppose:
$.get('/product-page',function(data){
$('#container').html($(data).MOVE-STUFF-AROUND);
});
Given this HTMl:
<div class="wrapper">
<div class="product">some text
<div class="item" id="1111"></div>
<div class="description">More text</div>
</div>
<div class="product">some text
<div class="item" id="2222"></div>
<div class="description">More text</div>
</div>
</div>
Running this JQuery code:
$(".product").each(function(i, obj) {
let $prodcut = $(this);
let $item = $prodcut.children(".item");
let $desc = $prodcut.children(".description");
$item.appendTo($desc);
});
Will give you this output:
<div class="wrapper">
<div class="product">some text
<div class="description">More text
<div class="item" id="1111"></div>
</div>
</div>
<div class="product">some text
<div class="description">More text
<div class="item" id="2222"></div>
</div>
</div>
</div>
The way it works: I select all prodcuts divs. I loop into each one and select the div labled "item" and then I move that div and append it into a div labled "description". Both item and description are children of product.
DEMO:
$(".product").each(function(i, obj) {
let $prodcut = $(this);
let $item = $prodcut.children(".item");
let $desc = $prodcut.children(".description");
$item.appendTo($desc);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<div class="wrapper">
<div class="product">some text
<div class="item" id="1111"></div>
<div class="description">More text</div>
</div>
<div class="product">some text
<div class="item" id="2222"></div>
<div class="description">More text</div>
</div>
</div>
Hard to tell from what is shown what you actually get as response. Assuming it is the full wrapper do:
$.get('/product-page',function(data){
var $data = $(data);
$data.find('.description').append(function() {
return $(this).prev('.item');
});
$('#container').html($data);
});
DEMO
I presume /product-page returns HTML since you suggest displaying it using $('#container').html(data);. If so, you can arrange your HTML in the backend script (product-page) so when you call it on AJAX, the HTML data is ready.
Or, you can opt /product-page to return JSON data, then arrange it in your JS code, e.g.:
$.get('/product-page', function(data) {
$('.wrapper').html(''); // assuming you want to clear contents of .wrapper
$.each(data, function (v) {
var html = '<div class="product>"' + v.some_text;
html += '<div class="description"'> + v.more_text;
html += '<div class="item">' + v.item_details + '</div>';
html += '</div>';
html += '</div>';
$('.wrapper').append(html);
});
});
EDIT:
Comments were already added before I could submit my answer, and realized above won't answer the OP, as AJAX endpoint comes from third party.
If the data comes from a third party, you need to create a DOM manipulator function based on your needs. Sadly, the construct depends on your needs.
I have a DIV that expands on click, it currently closes when another DIV is clicked but I would also like it to close on click, my code is below:
The Jquery:
$(function(){
$('.opReview').click(function(){
$('.review').addClass('hide');
$(this).children('.review').toggleClass('hide');
});
});
The HTML Markup (Wordpress code can be ignored)
<article class="sixteen columns opReview">
<img class="opLogo" src="<?php bloginfo('stylesheet_directory'); ?>/img/core/operator/90x58_operatorlogo/<?php echo $op_logo?>.png" alt="<?php echo($op_title)?>" >
<div class="list_details">
<div class="reviewTitle"><p>Click To </br> Read a review</p> </div>
</div>
<button class="claimBtn"><i class="fa fa-chevron-circle-right fa-rotate-90"></i></button>
<div class="clear"></div>
<div class="review hide">
<h1><?php echo $op_name; ?></h1>
<p><?php echo $operator_review; ?></p>
</div>
</article>
This code hides all .review elements and then toggles the active one, unhiding it
$('.review').addClass('hide');
$(this).children('.review').toggleClass('hide');
you need to do exclude the current item from the first selector
$(this).siblings('.review').addClass('hide');
$(this).children('.review').toggleClass('hide');
I am trying to write a little jQuery script that checks a set of div's to see if they have a data-name attribute. For the ones that have a data-name, it will create a link. The href of that link should be the name of the data-value plus contain the file extension (eg. .txt).
Everything seems to work OK except when I try to add the data value onto the link. The ultimate result of this script is to output something like this for each of those div's:
<p class="data-link">Edit
Below is my script. I have identified that area that I am having issue with.
var dataNameWrappers = $("div#desktopSidebar div[data-name]");
dataNameWrappers.each(function() {
var dataNameWrappers_action = "" + $(this).attr("data-name");
$(this).prepend("<p class='edit-link'><a>Edit</a></p>");
var dataNameWrapperEditLink = $("div#desktopSidebar p.edit-link a");
dataNameWrapperEditLink.each(function() {
$(this).attr('href', <<stuck_here>>);
});
});
Any help will be great.
Thanks
As requested, here is my sidebar HTMl structure
<div id="desktopSidebar">
<div class="sidebar userbox">
<h3 class="sidebarheader"> Welcome {{username}}}</h3>
</div>
<div data-name="social_media_sitewide" class="sidebar socialmedia">
<h3 class="sidebarheader">Follow Tennis-Chat</h3>
</div>
<div data-name="site_promotions" class="sidebar promotions">
<h3 class="sidebarheader">Current Promotions</h3>
</div>
<div data-name="livescores" class="sidebar Livescores">
<h3 class="sidebarheader">Live Scores</h3>
</div>
<div class="sidebar tournaments">
<h3 class="sidebarheader">Tournaments</h3>
</div>
<div data-name="featured-profiles" class="sidebar profiles">
<h3 class="sidebarheader">Today's Profile: {{featured_profile_name}}</h3>
</div>
<div data-name="side_advertisment" class="sidebar Advertisement">
<h3 class="sidebarheader">Advertisement</h3>
</div>
<div class="sidebar Headlines">
<h3 class="sidebarheader">Tennis-Chat Headlines</h3>
</div>
<div class="sidebar mostrecent" id="mostRecentTopics">
<h3 class="sidebarheader">Most Recent Posts</h3>
</div>
</div>
I don't know why you are using a second loop to add the HREFs when you already have everything you need.
Working fiddle here: http://jsfiddle.net/Q4j8S/.
HTML:
<div id="desktopSidebar">
<div class="sidebar userbox">
<h3 class="sidebarheader"> Welcome {{username}}}</h3>
</div>
<div data-name="social_media_sitewide" class="sidebar socialmedia">
<h3 class="sidebarheader">Follow Tennis-Chat</h3>
</div>
<div data-name="site_promotions" class="sidebar promotions">
<h3 class="sidebarheader">Current Promotions</h3>
</div>
<div data-name="livescores" class="sidebar Livescores">
<h3 class="sidebarheader">Live Scores</h3>
</div>
<div class="sidebar tournaments">
<h3 class="sidebarheader">Tournaments</h3>
</div>
<div data-name="featured-profiles" class="sidebar profiles">
<h3 class="sidebarheader">Today's Profile: {{featured_profile_name}}</h3>
</div>
<div data-name="side_advertisment" class="sidebar Advertisement">
<h3 class="sidebarheader">Advertisement</h3>
</div>
<div class="sidebar Headlines">
<h3 class="sidebarheader">Tennis-Chat Headlines</h3>
</div>
<div class="sidebar mostrecent" id="mostRecentTopics">
<h3 class="sidebarheader">Most Recent Posts</h3>
</div>
</div>
JavaScript:
var dataNameWrappers = $("div#desktopSidebar div[data-name]");
dataNameWrappers.each(function() {
var dataNameWrappers_action = $(this).attr("data-name");
console.log('data-name ' + dataNameWrappers_action);
$(this).prepend('<p class="edit-link">Edit</p>');
/* Don't need this
var dataNameWrapperEditLink = $("div#desktopSidebar p.edit-link a");
dataNameWrapperEditLink.each(function() {
$(this).attr('href', dataNameWrappers_action);
});
*/
});
Instead of iterating through the a tags after you do the prepend, it may be better to make the HTML fragment with the desired href attribute.
Here is the code that accomplishes that:
$('#desktopSidebar .sidebar[data-name]').each(function(index, el){
var href = $(el).attr('data-name') + ".txt";
$(el).prepend('<p class="edit-link">Edit');
});