I am trying to group the divs with the same attribute and put them into a container div. The divs are generated. The structure looks like this.
<div class="cleanse">A</div>
<div class="treat">B</div>
<div class="prime">C</div>
<br><br><br>
<div class="product"><img alt="red" src="http://aar.co/508-859-thickbox/therapy-ball-small-red.jpg" width="100px"></div>
<div class="product"><img alt="blue" src="http://www.valleyvet.com/swatches/11178_L_230_vvs.jpg" width="100px"></div>
<div class="product"><img alt="red" src="http://aar.co/508-859-thickbox/therapy-ball-small-red.jpg" width="100px"></div>
<div class="product"><img alt="yellow" src="http://debenhams.scene7.com/is/image/Debenhams/304028400423?$ProdLarge$" width="100px"></div>
<div class="product"><img alt="blue" src="http://www.valleyvet.com/swatches/11178_L_230_vvs.jpg" width="100px"></div>
And the script what I have so far which is not working is
$(function(){
$('.product').each(function(){
if ($(this).is('[red]')) {
$(this).appendTo($('.cleanse'));
} else {
if ($(this).is('[blue]')) {
$(this).appendTo($('.treat'));
} else {
if ($(this).is('[yellow]')) {
$(this).appendTo($('.prime'));
}
}
}
}
});
Use the has filter:
$(function() {
var $products = $('.product');
$products.filter(':has([alt=red])').appendTo('.cleanse');
$products.filter(':has([alt=blue])').appendTo('.treat');
$products.filter(':has([alt=yellow])').appendTo('.prime');
});
Here's the fiddle: http://jsfiddle.net/qxRY4/1/
If you're dealing with a larger dataset, you might want to use a loop instead. Here's how:
$(function() {
var $products = $('.product');
var map = {
red: 'cleanse',
blue: 'treat',
yellow: 'prime'
};
$.each(map, function (attr, className) {
$products.filter(':has([alt=' + attr + '])').appendTo('.' + className);
});
});
Here's the fiddle: http://jsfiddle.net/qxRY4/2/
try this:
$(function(){
var colorMap = {red: "cleanse", blue: "treat", yellow: "prime"};
$('.product > img').each(function(){
var el = $(this);
el.appendTo($('.' + colorMap[el.attr('alt')]));
});
});
http://jsfiddle.net/y9CS7/2/
$(function() {
var $prod = $('.product');
$prod.find('[alt="red"]').appendTo($('.cleanse'));
$prod.find('[alt="blue"]').appendTo($('.treat'));
$prod.find('[alt="yellow"]').appendTo($('.prime'));
});
This will move the parent <div>
$(function() {
var $prod = $('.product');
$prod.find('[alt="red"]').parent().appendTo($('.cleanse'));
$prod.find('[alt="blue"]').parent().appendTo($('.treat'));
$prod.find('[alt="yellow"]').parent().appendTo($('.prime'));
});
if you want to keep the iteration on .product, first you need to select the img tag, not only this, since this would be the div, not the image tag with the alt:
$(function(){
$('.product').each(function(){
if ($("img",this).is('[alt="red"]')) {
$(this).appendTo('.cleanse');
} else {
if ($("img",this).is('[alt="blue"]')) {
$(this).appendTo('.treat');
} else {
if ($("img",this).is('[alt="yellow"]')) {
$(this).appendTo('.prime');
}
}
}
}
});
Related
I have problem with my code.
I have products on my website, each product has his own <a><h1>CODE</h1></a> and I need to take this CODE and paste it before an image. I need to copy element with has class="loop1" and paste it into another element with class="lop1" and then take another element with class="loop2" and paste into element with class="lop2" and so on..
I made class with same numbers for easier copying, but it doesnt work. Can sombody help me?
This is my code:
$('#loop').addClass(function(i) {
return 'lop'+(i+1);
});
$('.p-name').addClass(function(i) {
return 'loop'+(i+1);
});
function doForm() {
var numb = ["1","2","3","4","5","6","7","8","9","10","11","13","14"];
for (var i=0;i<numb.length;i++) {
number = numb[i];
selector = '.loop' + number;
if ($(selector).length != 0) {
val = $(selector).html();
$('lop' + number).html(val);
}
}
}
doForm();
Related html:
<div class="columns">
<div id="loop" class="lop1"></div>
<div class="p-image">
<img src="https://" width="290" height="218">
</div>
<div class="p-info">
<span itemprop="name">PRODUCT</span>
</div>
<div>
So I need to take from "p-info > a" and paste it into div "lop1". Depends on number in class copy and paste HTML into div with same number.
Change $('lop' + radek).html(val); to $('.lop' + number).html(val);
Notice the . at the beginning of lop, it will create a selector to fetch element based on the class.
$('#loop').addClass(function(i) {
return 'lop'+(i+1);
});
$('.p-name').addClass(function(i) {
return 'loop'+(i+1);
});
function doForm() {
var numb = ["1","2","3","4","5","6","7","8","9","10","11","13","14"];
for (var i=0;i<numb.length;i++) {
var number = numb[i];
var selector = '.loop' + number;
if ($(selector).length != 0) {
var val = $(selector).html();
$('.lop' + number).html(val);
}
}
}
doForm();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="columns">
<div id="loop" class="lop1"></div>
<div class="p-image">
<img src="https://" width="290" height="218">
</div>
<div class="p-info">
<span itemprop="name">PRODUCT</span>
</div>
<div>
I have the following html structur (endless):
<div class="wrapper">
<div class="content"> Its block 3
<div class="number">3</div>
</div>
</div>
<div class="wrapper">
<div class="content"> Its block 2
<div class="number">2</div>
</div>
</div>
I want to sort it by clicking a button like this:
<div class="wrapper">
<div class="content"> Its block 2 <--- new order
<div class="number">2</div> <--- new order
</div>
</div>
<div class="wrapper">
<div class="content"> Its block 3 <--- new order
<div class="number">3</div> <--- new order
</div>
</div>
... but with my script it doesn´t work (because of the same div class name, I think?). So, how can I sort this and toggle the sort by highest number and lowest number? Can anybody help me?
function sortHigh(a, b) {
var date1 = $(a).find(".content .number").text()
var date2 = $(b).find(".content .number").text();
return $(a).find(".content .number").text() > $(b).find(".content .number").text();
};
function sortLow(a, b) {
var date1 = $(a).find(".content .number").text()
var date2 = $(b).find(".content .number").text();
return $(a).find(".content .number").text() < $(b).find(".content .number").text();
};
//how to toggle?
$(function () {
$('.sort').click(function () {
$('.content').sort(sortHigh).appendTo('.wrapper');
}, function () {
$('.content').sort(sortLow).appendTo('.wrapper');
});
});
Thats my bad try: fiddle
try to change your code with this:-
var toggle="high";
//how to toggle?
$(function(){
$('.sort').click(function () {
if (toggle == "high") {
toggle = "low";
$('.list').html($('.list .wrapper').sort(sortLow));
} else {
toggle = "high"
$('.list').html($('.list .wrapper').sort(sortHigh));
}
});
});
Demo
Using jQuery, you can add the sort functionality as such:
jQuery.fn.sortDomElements = (function() {
return function(comparator) {
return Array.prototype.sort.call(this, comparator).each(function(i) {
this.parentNode.appendChild(this);
});
};
})();
var srtdesc = true;
$(function() {
$(".sort").click(function() {
srtdesc = !srtdesc;
$(".list").children().sortDomElements(function(a, b) {
if (srtdesc) {
return Number($(a).find('.number').text()) - Number($(b).find('.number').text());
} else {
return Number($(b).find('.number').text()) - Number($(a).find('.number').text());
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="sort">Sort-Button</button>
<div class="list">
<div class="wrapper">
<div class="content">Its block 3
<div class="number">3</div>
</div>
</div>
<div class="wrapper">
<div class="content">Its block 1
<div class="number">1</div>
</div>
</div>
<div class="wrapper">
<div class="content">Its block 2
<div class="number">2</div>
</div>
</div>
</div>
You have two issues with your code.
The first is that your sorts are sorting strings. return "2" > "3" for example.
The other issue is that the click function you're using isn't toggling correctly. I'm guessing you're familiar with the .hover() syntax which is why you've done it that way.
As you can see, I'm forcing sortHigh and sortLow to return Numbers. I've also done a sorting low/high check and toggle within the click function.
function sortHigh(a, b) {
var date1 = Number($(a).find(".number").text());
var date2 = Number($(b).find(".number").text());
return date1 > date2;
};
function sortLow(a, b) {
var date1 = Number($(a).find(".number").text());
var date2 = Number($(b).find(".number").text());
return date1 <= date2;
};
$(function(){
var sortHighCheck = null;
$('.sort').click(function(){
if (sortHighCheck === true) {
$('.wrapper').sort(sortLow).appendTo('.list')
sortHighCheck = false;
} else {
$('.wrapper').sort(sortHigh).appendTo('.list')
sortHighCheck = true;
}
});
});
Edit: Forgot to add the jsfiddle link
If you want to sort, you can add data-val attribute to each content div:
<div class="content" data-val="2"> Its block 2 <--- new order
and sort each wrapper div with this code:
jQuery("#sort").click( function() {
jQuery('.wrapper').sort(function (a, b) {
return jQuery(a).find('.content').data('val') - jQuery(b).find('.content').data('val');
}).each(function (_, container) {
jQuery(container).parent().append(container);
});
});
Well, i have a $.get method to get data from other page and load it to a div. But even with the .each, only one div is affected.
Here is the HTML:
$(document).ready(function() {
$(".post1").each(function() {
var categlink = $(this).find(".post-area > a").attr("href");
var pAvatar = $(this).find("img.postavatar");
var pTTitle = $(this).find(".topictitle");
var pContent = $(this).find(".postcontent");
var pType = $(this).find("img.post-type");
var pOwnerlink = $(this).find(".p-ownerlink");
var pTime = $(this).find(".post-time");
$.get(categlink, function(data) {
var tLink = $(data).find(".main-content:nth-child(5) tr:first-child a.topictitle").attr("href");
$.get(tLink, function(data) {
var fAvatar = $(data).find(".post:first-child .user-basic-info > a > img").attr("src");
pAvatar.attr("src", fAvatar);
var fTopicTitle = $(data).find(".paged-head.clearfix > h1").text();
pTTitle.text(fTopicTitle);
var fTContent = $(data).find(".post:first-child .entry-content > div:first-child").html();
pContent.html(fTContent);
var fType = $(data).find(".post:first-child .posthead > h2 > img").attr("src");
pType.attr("src", fType);
var fOwner = $(data).find(".post:first-child h4.username > a > span > strong").text();
pOwnerlink.text(fOwner);
var fOwnerlink = $(data).find(".post:first-child h4.username > a").attr("href");
pOwnerlink.attr("href", fOwnerlink);
var fTTime = $(data).find(".post:first-child .posttime").text();
pTime.text(fTTime);
$(".postcontent img").each(function() {
if ($(this).height() > 70) {
$(this).addClass("imgresize");
$('.main-forum').isotope({
itemSelector: '.c-post',
percentPosition: true,
});
}
});
});
});
});
});
<div class="c-post post1">
<div class="post-info">
<img class="postavatar">
<div class="topictitle"></div>
</div>
<div class="postcontent"></div>
<div class="post-info2">
<img class="post-type">
<div class="post-owner">Por
<a class="p-ownerlink"></a>
</div>
<div class="post-time"></div>
<div class="post-area">{catrow.forumrow.FORUM_NAME}
</div>
</div>
</div>
<div class="c-post post2">
<div class="post-info">
<img class="postavatar">
<div class="topictitle"></div>
</div>
<div class="postcontent"></div>
<div class="post-info2">
<img class="post-type">
<div class="post-owner">Por
<a class="p-ownerlink"></a>
</div>
<div class="post-time"></div>
<div class="post-area">{catrow.forumrow.FORUM_NAME}
</div>
</div>
</div>
<div class="c-post post3">
<div class="post-info">
<img class="postavatar">
<div class="topictitle"></div>
</div>
<div class="postcontent"></div>
<div class="post-info2">
<img class="post-type">
<div class="post-owner">Por
<a class="p-ownerlink"></a>
</div>
<div class="post-time"></div>
<div class="post-area">{catrow.forumrow.FORUM_NAME}
</div>
</div>
</div>
Actually, my page has various .post1 divs, but only one of all is affected.
Thanks.
EDIT
So, the problem is: we cant use a $.get inside other $.get. The thing is: every .post1 has a link, that i call tLink. After getting tLink of the .post1, i need to run another $.get method using the tLink value to get info from other page. I've tried that, no sucess:
function loadpostinfo() {
$(".post1").each(function () {
var categlink = $(this).find(".post-area > a").attr("href");
var pAvatar = $(this).find("img.postavatar");
var pTTitle = $(this).find(".topictitle");
var pContent = $(this).find(".postcontent");
var pType = $(this).find("img.post-type");
var pOwnerlink = $(this).find(".p-ownerlink");
var pTime = $(this).find(".post-time");
$.get(categlink, function (data) {
var tLink = $(data).find(".main-content:nth-child(5) tr:first-child a.topictitle").attr("href");
});
if (typeof tLink === "undefined") {
} else {
console.log("checked if tLink is valid");
$.get(tLink, function (data) {
console.log("running tLink get method");
var fAvatar = $(data).find(".post:first-child .user-basic-info > a > img").attr("src");
pAvatar.attr("src", fAvatar);
var fTopicTitle = $(data).find(".paged-head.clearfix > h1").text();
pTTitle.text(fTopicTitle);
var fType = $(data).find(".post:first-child .posthead > h2 > img").attr("src");
pType.attr("src", fType);
var fOwner = $(data).find(".post:first-child h4.username > a > span > strong").text();
pOwnerlink.text(fOwner);
var fOwnerlink = $(data).find(".post:first-child h4.username > a").attr("href");
pOwnerlink.attr("href", fOwnerlink);
var fTTime = $(data).find(".post:first-child .posttime").text();
pTime.text(fTTime);
var fTContent = $(data).find(".post:first-child .entry-content > div:first-child").html();
pContent.html(fTContent);
setTimeout(alignposts, 5000);
});
}
});
}
$(document).ready(function () {
loadpostinfo();
});
How do i proceed?
OH MY GOSH, i'm the dumbest man in Earth!
The problem: only the first .post1 of page has content loaded. Each of then have a categlink url value, wich is used to get the TLink url value inside the categlink page. Then i use the TLink with $.get to load content inside this .post1 div.
The fix: only the categlink page from the first .post1 div actually has a TLink inside to use. The other ones was having no content matching my filters. So, this mess was all about data on server, and not JQuery or HTML.
Sorry for wasting your time, guys!
It's all fixed now, thanks!
It might be over kill but this works. I copied the first variable in its entirety and and gave it a new name. Also, delinked it from call_files/header.html and css/header.css files. Instead, I linked it to the layout.css which governs the appearance of the second menu. I'm sure there is a way to stream line it.
<script type="text/javascript">
$().ready(function () {
var stickyPanelOptions = {
topPadding: 0,
afterDetachCSSClass: "BoxGlow_Grey2",
savePanelSpace: true,
onDetached: function (detachedPanel, spacerPanel) {
call_files/header.html(call_files/header.html() + " has been detached!");
css/header.css("background-color", "#1000ff");
},
onReAttached: function (detachedPanel) {
call_files/header.html(call_files/header.html().replace(" has been detached!", ""));
},
parentSelector: null
};
var secondstickyPanelOptions = {
topPadding: 150,
savePanelSpace: true,
onDetached: function (detachedPanel, spacerPanel) {
detachedPanel.html(detachedPanel.html() + " has been detached!");
layout.css("background-color", "#ffffff");
},
onReAttached: function (detachedPanel) {
detachedPanel.html(detachedPanel.html().replace(" has been detached!", ""));
},
parentSelector: null
};
// multiple panel example (you could also use the class ".stickypanel" to select both)
$("#Panel1").stickyPanel(stickyPanelOptions);
$("#Panel2").stickyPanel(secondstickyPanelOptions);
$("#Panel3").stickyPanel(stickyPanelOptions);
$("#UnstickPanel3").click(function () {
$("#Panel3").stickyPanel("unstick");
});
stickyPanelOptions.parentSelector = "#AbsoluteDiv";
$("#Panel4").stickyPanel(stickyPanelOptions);
stickyPanelOptions.parentSelector = "#NormalDiv";
$("#Panel5").stickyPanel(stickyPanelOptions);
});
</script>
HTML
<div id="Panel1" class="stickyPanel">
<div class="headerBGdiv"> </div>
<?php include('../call_files/pagesheader.html');?>
</div>
<div id="Panel2" class="stickyPanel">
<div id="navbar2">
<ul id="tabs">
<li>Buyer's Guide</li>
<li>Export Restrictions</li>
<li>Infrared 101</li>
<li>White Pages</li>
<li>Terminology</li>
<li>Newsroom</li>
<li>Gallery</li>
</ul>
</div>
</div>
Try This it uses separate config options for each panel.
<script type="text/javascript">
$().ready(function () {
var stickyPanelOptions = {
topPadding: 0,
savePanelSpace: true,
onDetached: function (detachedPanel, spacerPanel) {
call_files/header.html(call_files/header.html() + " has been detached!");
css/header.css("background-color", "#1000ff");
},
secondStickyPanelOptions = stickyPanelOptions,
onReAttached: function (detachedPanel) {
call_files/header.html(call_files/header.html().replace(" has been detached!", ""));
},
parentSelector: null
};
secondStickyPanelOptions.topPadding = 100;
// multiple panel example (you could also use the class ".stickypanel" to select both)
$("#Panel1").stickyPanel(stickyPanelOptions);
$("#Panel2").stickyPanel(secondStickyPanelOptions);
$("#Panel3").stickyPanel(stickyPanelOptions);
$("#UnstickPanel3").click(function () {
$("#Panel3").stickyPanel("unstick");
});
stickyPanelOptions.parentSelector = "#AbsoluteDiv";
$("#Panel4").stickyPanel(stickyPanelOptions);
stickyPanelOptions.parentSelector = "#NormalDiv";
$("#Panel5").stickyPanel(stickyPanelOptions);
});
</script>
I am after recommendations of what dijit widget I can use for the screenshot below. Our users will need to add another row.
Can use
function createRow(ParentNode) {
require(["dojo/_base/parser", "dojo/dom-construct"], function(parser, domConstruct){
var div = dojo.create("div", { 'data-dojo-type' : 'dijit.form.TextBox' }, ParentNode);
parser.parse(div);
};
}
Or
function createRow(ParentNode) {
var row = new dijit.form.TextBox( { /* params */ } );
row.placeAt(ParentNode);
row.startup();
}
With
<div id="parent">
<div data-dojo-type="dijit.form.TextBox"></div>
</div>
<div
data-dojo-type="dijit.form.Button"
data-dojo-props="onClick: function() { createRow('parent'); }"
></div>