We Keep Coding

Jquery if div hasClass do something with a other div

Here is my problem (besides the fact that i'm a beginnen with javascript). I am building a page that wil load ajax content into a HTML page with a tab plugin. We need to build one page only which has to carry loads of content. Everything is working fine but we need to have little enhancement that uses javascript.
The first set are the tabs (ul.tabs) the second set are the content placeholders (div.panel-container) the third set is a layer popup (div#popup)
<div id="ajax-tab-container" class='tab-container'>
<ul class='tabs'>
<li class='tab'>one</li>
<li class='tab'>two</li>
<li class='tab'>three</li>
</ul>
<div class='panel-container'>
<div id="one" class="active"></div>
<div id="two"></div>
<div id="three"></div>
</div>
<div id="#popup">
<div class="one-ph">Content</div>
<div class="two-ph">Content</div>
<div class="three-ph">Content</div>
</div>
Now based on which tab is active the current scripts set the active status. Now what i need to do is create a script that checks (hasClass) which div within the .panel-container hasClass "active". But then it should addClass to the div within div#popup. But they have to match.
So if div#one hasClass "active" then addClass to div.one-ph,
if div#two hasClass "active" then addClass to div.two-ph etc.
Now in this example there are only three but the finished document will have about 20. kan somebody help me create this, i tried almost every example but is does not work. Also this is not a click function but a function that should work probably on document ready.
Please help this desperate guy

UPDATED
Fiddle
jQuery(document).ready(function() {
jQuery('.panel-container > div.active').each(function() {
var id = jQuery(this).attr('id');
var target = '.' + id + '-ph';
jQuery(target).addClass('active');
});
jQuery('ul.tabs > li.tab a').click(function(e) {
e.preventDefault();
var target = jQuery(this).attr('data-target');
var targetPopup = '.' + target.replace('#', '') + '-ph';
jQuery('.panel-container .active, #popup .active').removeClass('active');
jQuery(target).addClass('active');
jQuery(targetPopup).addClass('active');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ajax-tab-container" class='tab-container'>
<ul class='tabs'>
<li class='tab'>one</li>
<li class='tab'>two</li>
<li class='tab'>three</li>
</ul>
<div class='panel-container'>
<div id="one" class="active"></div>
<div id="two"></div>
<div id="three"></div>
</div>
<div id="popup">
<div class="one-ph">Content</div>
<div class="two-ph">Content</div>
<div class="three-ph">Content</div>
</div>
</div>

Remove div class based on child div

I have a html like this
<div class="accordion_in1 accordion_in acc_active">
<div class="acc_head" id="removeArrow">
<div class="acc_icon_expand"></div>
Investor Relations
</div>
<div class="acc_content" style="display: block;">
<div class="acc_content_faq1">
<ul>
<li>
Profile
</li>
</ul>
</div>
<div class="acc_content_faq1">
<ul>
<li>
Directors
</li>
</ul>
</div>
</div>
</div>
I need to remove the class acc_head from the second div if there is no div with class acc_content
I tried to get this in jquery like
<script>
$(document).ready(function(){
if ($("accordion_in > div.acc_content").length < 0) {
$('#removeArrow').removeClass('.acc_head')
}
});
</script>
But I can't able to remove the class.Can any one help
Thanks in advance for help

Try this code.
if ($("accordion_in > div.acc_content").length) {
$('#removeArrow').removeClass('acc_head')
}

If there is no selector with accordion_in > div.acc_content, the length is 0, not a value less than 0.
Try this code.
if (!$("accordion_in > div.acc_content").length) {
$('#removeArrow').removeClass('.acc_head')
}

Try this:
<script>
$(document).ready(function(){
if (($(".acc_active").find("div.acc_content")).length == 0) {
$('#removeArrow').removeClass('.acc_head');
}
});
</script>

Switch Content of Div onclick

I've got two divs - each with one image inside. If I click on the image inside the second div I want this image to become the content of the first div (like a gallery).
It's important that I don't replace the links inside the img tag, so document.IMG1name.src=document.IMG2name.src isn't a possibility.
I tried it with innerhtml, but it doesnt work:
<div id="container1">
<img src="blablabla">
</div>
<div id="container2"; onclick="document.getElementById('container1').innerHTML=document.getElementById('container2').innerHTML"><img src="../funnycat.jpg">
</div>

mm... your code works fine, just close img tags and remove semicolon:
<div id="container1">
<img src="blablabla" />
</div>
<div id="container2" onclick="document.getElementById('container1').innerHTML=document.getElementById('container2').innerHTML"><img src="https://www.google.es/logos/doodles/2013/holiday-series-2013-3-4504416610680832-hp.jpg" />
</div>
here you have a demo: http://jsfiddle.net/HLs86/

HTML
<div class="pricing_table" id="monthly">
<ul>
<li>Basic</li>
<li>Subscribe Now</li>
</ul>
<ul style="background-color:#CCCCCC;">
<h2>Monthly Plans</h2><a class='plansSwitch' href='#yearly'>Click here to switch to the "Yearly Plans"</a></ul>
</div>
<div class="pricing_table" id="yearly">
<ul>
<li>Basic</li>
<li>Subscribe Now</li>
</ul>
<ul style="background-color:#CCCCCC;">
<h2>Yearly Plans</h2><a class='plansSwitch' href='#monthly'>Click here to switch to the "Monthly Plans"</a></ul>
</div>
JS
var $plansHolders = $('#monthly, #yearly').hide();
$('#monthly').show();
$('.plansSwitch').click(function() {
var href = $(this).attr('href');
$plansHolders.hide();
$(href).show();
});

you just need to add javascript: on your onclick action like this
<div id="container1"></div>
<div id="container2" onclick="javascript:document.getElementById('container1').innerHTML=document.getElementById('container2').innerHTML"><img src="http://i.imgur.com/0fS8dCsb.jpg"/>
</div>
there is example

Onmouseover on HTLML li tag

I'm new to asp.net (and to stack overflow :) ) and I want a hint element to be shown on onmouseover event of li tags. I don't know how to set the position of the hint element. My code is something like this:
<script language="javascript" type="text/javascript">
function onmouseoveragent(e) {
document.getElementById("agentVisit").style.display = "block";
document.getElementById("agentVisit").offsetLeft = e.offsetLeft; /*e.????*/
document.getElementById("agentVisit").offsetTop = e.offsetTop; /*e.????*/
};
</script>
<div class="node">
<div class="taxonomy"></div>
<div class="content">
<div id="contact-map">
<ul>
<li id="city1" onmouseover= "onmouseoveragent(this)">
<a "blabla">
<span class="hideme">city name</span>
</a>
<p class="hideme"> city name <strong class="tel">123456789</strong></p>
</li>
/*other list items*/
</ul>
</div>
<div class="hr">
</div>

Unless you need a very good looking design to show your hint, you can use
<li title="city name">
update:
Check if it helps:
http://jsfiddle.net/ysuw5/91/

How to change span text than in the parent element

I'm using double click on the img
This code
$("#insert-zone").on("dblclick", ">div>img", function(){
console.log($(this).parentNode.className(spanDefCat));
var answer = confirm ("Set Defaul Cat to " +$("#txt_CategoryID").val()+"?")
if (answer){....
.
This is the div item
<div class="item-container cart-item sameCat">
<div class="SetDefault">
<img border="0" title="Carrie Style Silver Name Necklace" src="medium_101-01-071-02.jpg" alt="1102">
<div class="item-header">
<div class="item-body">
<ul class="item-ul">
<li>
<span class="spanDefCat">DefaultCat: 32</span>
</li>
</ul>
</div>
</div>
<div class="item-footer"></div>
</div>
When I double click the img, I need to go back to parent cart-item than contains li with span class spanDefCat like you see it in code and change the DefaulCat to 80 or what ever I need to change the span.
full Html
<div class="ui-widget-content">
<ol id="insert-zone" class="ui-droppable ui-sortable">
<div class="item-container cart-item sameCat">
<div class="item-container cart-item ">
<div class="item-container cart-item sameCat">
<div class="item-container cart-item sameCat">
</ol>
</div>

you can use $(this).parent().find('.spanDefCat').html($("#txt_CategoryID").val())
This will change the value of all .spanDefCat in the parent of the image.

Add this code inside .on function
var newCatVal = "DefaultCat: "+$("#txt_CategoryID").val();
$(this).closest('.cart-item').find(".spanDefCat").text(newCatVal);

Here is the code that does what you want:
$(function(){
$("img").dblclick(function(){
$(this).parent().find(".spanDefCat").each(function(){
$(this).text("DefaultCat: 80");
});
});
});
Here is the working fiddle: http://jsfiddle.net/ZrA8E/