Hi have multiple input to upload 5 pictures, but the issue is that the css is not displaying properly (it only affect the first one for the text block) and the javascript is not reacting to the correct input.
So I have this html structure for the 5 input:
<div class="form-group col-md-12" id="imagesSup">
<label for="imagesSup" class="col-md-12">Images supplémentaires: </label>
<div class="image">
<img src='' class="conteneurImagesSup col-md-2" id="conteneurImagesSup0">
<p><span>Chargez une image</span></p>
<input type="file" name="imagesSup[]" id="imageSup0" class="inputImagesSup" style="display: none">
</div>
<div class="image">
<img src='' class="conteneurImagesSup col-md-2" id="conteneurImagesSup1">
<p><span>Chargez une image</span></p>
<input type="file" name="imagesSup[]" id="imageSup1" class="inputImagesSup" style="display: none">
</div>
<div class="image">
<img src='' class="conteneurImagesSup col-md-2" id="conteneurImagesSup2">
<p><span>Chargez une image</span></p>
<input type="file" name="imagesSup[]" id="imageSup2" class="inputImagesSup" style="display: none">
</div>
<div class="image">
<img src='' class="conteneurImagesSup col-md-2" id="conteneurImagesSup3">
<p><span>Chargez une image</span></p>
<input type="file" name="imagesSup[]" id="imageSup3" class="inputImagesSup" style="display: none">
</div>
<div class="image">
<img src='' class="conteneurImagesSup col-md-2" id="conteneurImagesSup4">
<p><span>Chargez une image</span></p>
<input type="file" name="imagesSup[]" id="imageSup4" class="inputImagesSup" style="display: none">
</div>
</div>
The css:
.conteneurImagesSup{
height: 160px;
border: dashed darkgrey medium;
border-radius: 5px;
margin-right: 25px;
text-decoration: none;
text-align: center;
padding: 0;
}
.image {
position: relative;
cursor:pointer;
}
.image p {
position: absolute;
top: 60px;
left: 0;
}
.image p span {
color: white;
font: bold medium Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
Which give us this result, where we can see the 4 text block missing:
And finally the javascript, when I add a picture I want it to be displayed in the corresponding field but, whatever the way I use to affect the img corresponding it only affects the last one:
for(var i=0; i<4; i++)
{
$("#conteneurImagesSup"+i).on('click', function(e){
e.preventDefault();
$("#imageSup"+i).trigger('click');
});
}
$(".inputImagesSup").change(function(event) {
$(this).siblings("img").attr('src',URL.createObjectURL(event.target.files[0]));
});
Which gives us:
I can only explain you the thing about the image always displayed in the last square.
you have a for loop :
for(var i=0; i<4; i++)
{
// smthg not relevent now
}
which is the same than :
var i = 0;
for (; i<4; i++){ // I want to explain you that i is declared out of the scope of the for loop.
}
So, when the following is run :
$("#conteneurImagesSup"+i).on('click', function(e){
//not relevant now
});
i has the value you want him to have.
But, when the "sub" function is called ($("#imageSup"+i).trigger('click');), i, that was declared out of the for scope, has currently the last value it had (4).
So, if you want to make it work correctly, you need to declare a new variable inside the scope of the for :
for(var i=0; i<4; i++)
{
var index = i;
$("#conteneurImagesSup"+i).on('click', function(e){
e.preventDefault();
$("#imageSup"+index).trigger('click');
});
}
I'm not sure as to why only the first square shows "Chargez une image", but have one remark:
If you want to match the last image (conteneurImagesSup4) also, make sure that the for loop's i reaches 4: for (var i = 0; i < 5; i += 1)
Ok I solved the jquery issue, you need to pass the i value to the event data or you will always have the last value of i. https://api.jquery.com/event.data/
But still cannot resolve the css problem.
Related
Hi I want to replace a div that is already displayed with another Hidden div choosed when i click on one of them(3 other divs(hidden) initially). the 4 links related to the 4 divs and in same way i can do that in each link clicked. below is the code:
<script type="text/javascript">
#4 Id of divs
var models = document.getElementById('models')
var geometry = document.getElementById('geometry')
var assembly = document.getElementById('assembly')
var loads = document.getElementById('loads')
#4 ID OF links (related to each div)
var models1 = document.getElementById('models1')
var geometryy = document.getElementById('geometryy')
var assemblyy = document.getElementById('assemblyy')
var loads1 = document.getElementById('loads1')
geometryy.addEventListener("click", function () {
models.style.display = "none"
loads.style.display = "none"
assembly.style.display = "none"
geometry.style.display = "block"
})
assemblyy.addEventListener("click", function () {
geometry.style.display = "none"
models.style.display = "none"
loads.style.display = "none"
assembly.style.display = "block"
})
loads1.addEventListener("click", function () {
geometry.style.display = "none"
models.style.display = "none"
assembly.style.display = "none"
loads.style.display = "block"
})
models1.addEventListener("click", function () {
models.style.display = "block"
geometry.style.display = "none"
assembly.style.display = "none"
loads.style.display = "none"
})
</script>
CSS:
<style>
#loads {
display: none;
}
#geometry {
display: none;
}
#assembly {
display: none;
}
#models {
display: block;
}
</style>
some Html code about the 4 divs:
<form action="{% url 'results' %}" method="post" id="gallery" novalidate onsubmit="return mySubmitFunction(event)">
<div style="padding-top: 10px; margin-left:138px;" class="parallax-window tm-section tm-section-gallery tm-flex background " id="models" >
<div style=" background-color: white; font-size:89%; width: 62rem; height: 32rem; margin-left:2.5rem; ">
<div class="card-warning" style="background-color: #C0C0C0;">
<nav class="navbar">
<a class="floated" style="font-weight: bolder; border-style: solid;" id="models1">Models</a>
Geometry
Assembly
Loads
</nav>
</div>
.......... some fields related to the div id="models"
</div>
</div>
----------------About the second div
<div style="padding-top: 10px;" class="parallax-window tm-section tm-section-gallery tm-flex" id="geometry" >
<div style=" background-color: white; font-size:89%; width: 62rem; height: 32rem; margin-left:2.5rem; ">
<div class="card-warning" style="background-color: #C0C0C0;">
<nav class="navbar">
Models
<a class="floated" style=" font-weight: bolder; border-style: solid;">Geometry</a>
Assembly
Loads
</nav>
</div>
<div style="display: flex;">
<div>
<img style="height: 372px; width:270px; margin-left: 25px;">
</div>
<div style="line-height: 0.001; margin-left: 10px; margin-top: 12px;">
------ some code for some fields
</div>
</div>
...... </div>
---- </div>
----------------About the third div
<div style="padding-top: 10px;" class="parallax-window tm-section tm-section-gallery tm-flex" id="assembly" >
<div style="background-color: white; font-size:89%; width: 62rem; height: 32rem; margin-left:2.5rem; ">
<div class="card-warning" style="background-color: #C0C0C0;">
<nav class="navbar">
Models
Geometry
<a class="floated" style=" font-weight: bolder; border-style: solid;">Assembly</a>
<a href="#loads" class="floated" style=" font-weight: bolder;" id="loads3" >Loads</a>
</nav>
</div>
<div style="display: flex;">
<div>
<img style="height: 372px; width:270px; margin-left: 25px;">
</div>
<div style="line-height: 0.001; margin-left: 10px; margin-top: 12px;">
------ some code for some fields
</div>
</div>
...... </div>
---- </div>
----------------About the fourth div
<div style="padding-top: 10px; " class="parallax-window tm-section tm-section-gallery tm-flex" id="loads" >
<div style="background-color: white; font-size:89%; width: 62rem; height: 32rem; margin-left:2.5rem;">
<div class="card-warning" style="background-color: #C0C0C0;">
<nav class="navbar">
<a href="#models" class="floated" style="font-weight: bolder;" >Models</a>
Geometry
Assembly
<a style=" font-weight: bolder; border-style: solid;">Loads</a>
</nav>
</div>
<div style="display: flex;">
<div>
<img style="height: 372px; width:270px; margin-left: 25px;">
</div>
<div style="line-height: 0.001; margin-left: 10px; margin-top: 12px;">
------ some code for some fields
</div>
</div>
...... </div>
---- </div>
</form>
what i want :at first the "models" div is shown and the other 3 divs("geometry",assembly","loads") are hidden , so i want when i click on "geometry" div , the first div "models" become hidden and the other divs ("assembly" and "loads" still hidden) and so on if click on assembly... i i want to apply that on every div(because evry div has the 4 links)
But it doesn't give me any result!
<html>
<head>
<style>
#div2, #div3, #div4{
display: none;
}
</style>
</head>
<body>
<div style="background-color: #C0C0C0 ;padding-top: 10px;width: 62rem; height: 32rem; ">
<div>
<a href="#models" class="geo wy" style="border-style: solid;" >Models</a>
Geometry
Assembly
Loads
</div>
<div id="div1" class="wy hid">
Models and other stuffs here
</div>
<div id="div2" class="pk hid">
Geometry and other stuffs here
</div>
<div id="div3" class="fk hid">
Assembly and other stuffs here
</div>
<div id="div4" class="gk hid">
Loads and other stuffs here
</div>
</div>
<script>
window.onload = btn() ;
function btn() {
var query = document.querySelectorAll(".geo") ; //No of hrefs
var pts = document.querySelectorAll(".hid"); //No of divs
for(var i=0;i<query.length;i++){
query[i].addEventListener("click", function() { //know which href is being clicked currently
var cla = this.getAttribute('class').split(' ')[1] ; //get second class of current href which would be wy, pk, fk, gk respectively.
var point = document.querySelectorAll("."+cla)[1]; //selecting the div as, [0] would select the href
for(var j=0;j<pts.length;j++){
pts[j].style.display = "none"; //hid all the div
query[j].style.border= "none"; //remove all the href border
}
this.style.border= "solid"; //Add currently clicked href border
point.style.display = "block"; //display currently clicked div
})
}
}
</script>
</body>
</html>
Sorry the id and classes name are given random i am not good at naming. Please don't hesitate to ask if you are confused
Context: CMPT stands for compte which is Account in english, the application can have multiple accounts which contains an hospitalisation field and for each hospitalisation fields present in ONE account, i want to be able to calculate the total cost for each hospitalisations.
Currently i am able to calculate the field total(mntTotHosp) which is obtained by doing the calculation of the field Tarif quotidien ( TariQuoti) * Nombre de jours (NbJrsHosp) . In english : Daily price * numbers of days.
But this works only for the first Hospitalisation (ListeHospitalisation[0].mntTotHosp) by doing this :
function CalculMntTotHosp() {
var tariQuoti = $("input[id$='TariQuoti']").val().replace(",", ".") || 0;
var nbJrsHosp = $("input[id$='NbJrsHosp']").val().replace(",", ".") || 0;
var mntTotHosp = tariQuoti * nbJrsHosp
$("input[id$='MntTotHosp']").val(mntTotHosp.toFixed(2).replace(".", ","));
}
My problem :
I would like to do this for each CmptETS in the list ListeCmptETS and each Hospitalisation contained in ListeHospitalisation which is contained in ListeCmptETS. Currently it's only able to calculate the total for the first hospitalisation present in the first account.
Here's a screenshot of the 3 fields used to do the calculation, to have a better understanding of the data:
Sorry the text is in french in the app but here's a visual representation to see the data :
Hopefully this was enough clear could anyone help ? Thanks a lot :)
It was a bit hard to know what to suggest without seeing more code, but maybe this vanilla-flavored example can get you started:
const list = Array.from(document.querySelectorAll(".listeCmptETS"));
Array.from(list).forEach((listeCmptETS) => {
const
hospSection = listeCmptETS.querySelector(".listeHosp"),
listeHospitalisation = Array.from(hospSection.querySelectorAll(".stay"));
listeHospitalisation.forEach((thisStay) => {
CalculMntTotHosp(thisStay);
});
});
function CalculMntTotHosp(stay) {
const
toNum = (str) => +(str.replace(',', '.') || 0),
toCurrency = (num) => num.toFixed(2).replace('.', ','),
tariQuoti = toNum( stay.querySelector('.TariQuoti').value ),
nbJrsHosp = toNum( stay.querySelector('.NbJrsHosp').value ),
output = toCurrency(tariQuoti * nbJrsHosp);
//console.log(`daily: ${tariQuoti}`, `days: ${nbJrsHosp}`);
stay.querySelector('.MntTotHosp').value = output;
}
.listeCmptETS { margin-bottom: 1rem; }
.section { width: 20rem; min-height: 2.5rem; padding-top: 0.4rem; border: 1px solid grey; }
.listeHosp {border-top: none; }
.stay { position: relative; padding: 0.3rem; }
.stay div { margin-bottom: 0.3rem; }
.stay input {display: inline-block; position: absolute; left: 3rem; }
<div class="listeCmptETS">
<div class="section">(non-hospitalization content goes here)</div>
<div class="listeHosp section">
<div class="stay">
<div>Daily<input class="TariQuoti" value="21,00" /></div>
<div>Days<input class="NbJrsHosp" value="2" /></div>
<div>Tot<input class="MntTotHosp" /></div>
</div>
<div class="stay">
<div>Daily<input class="TariQuoti" value="22,00" /></div>
<div>Days<input class="NbJrsHosp" value="" /></div>
<div>Tot<input class="MntTotHosp" /></div>
</div>
</div>
</div>
<div class="listeCmptETS">
<div class="section">(non-hospitalization content goes here)</div>
<div class="listeHosp section">
<div class="stay">
<div>Daily<input class="TariQuoti" value="23,00" /></div>
<div>Days<input class="NbJrsHosp" value="1" /></div>
<div>Tot<input class="MntTotHosp" /></div>
</div>
<div class="stay">
<div>Daily<input class="TariQuoti" value="24,00" /></div>
<div>Days<input class="NbJrsHosp" value="3" /></div>
<div>Tot<input class="MntTotHosp" /></div>
</div>
</div>
</div>
I am replicating this webpage https://www.modsy.com/project/furniture and I wrote the code On every slide there will be changing of image and phrase like that there are three phrases and images now I want to store the image and phrase in the local storage what the user has finalized
My html code is:
<div class="image mt-3 mb-3" id="sliderImages">
<img src="../static/images/1.jpg" width="400" height="180">
<img src="../static/images/2.jpg" width="400" height="180">
<img src="../static/images/3.jpg" width="400" height="180">
</div><br>
<div class="rangeslider">
<input type="range" min="1" max="3" value="1" class="myslider" id="sliderRange">
<div id="sliderOutput">
<div class="container">
<div class="row mt-4">
<div class="col-4">
<h6 class="display-6">Starting From Scratch</h6>
<p> I'm designing the room </p>
</div>
<div class="col-4">
<h6 class="display-6">Somewhere in Between</h6>
<p>I'm designing around a few pieces I already own</p>
</div>
<div class="col-4">
<h6 class="display-6">Mostly Furnished</h6>
<p>I want to put the finishing touches on my room</p>
</div>
</div>
</div>
<div class="container">
<div class="row mt-4">
<div class="col-4">
<h6 class="display-6">Starting From Scratch</h6>
<p> I'm designing the room </p>
</div>
<div class="col-4">
<h6 class="display-6">Somewhere in Between</h6>
<p>I'm designing around a few pieces I already own</p>
</div>
<div class="col-4">
<h6 class="display-6">Mostly Furnished</h6>
<p>I want to put the finishing touches on my room</p>
</div>
</div>
</div>
<div class="container">
<div class="row mt-4">
<div class="col-4">
<h6 class="display-6">Starting From Scratch</h6>
<p> I'm designing the room </p>
</div>
<div class="col-4">
<h6 class="display-6">Somewhere in Between</h6>
<p>I'm designing around a few pieces I already own</p>
</div>
<div class="col-4">
<h6 class="display-6">Mostly Furnished</h6>
<p>I want to put the finishing touches on my room</p>
</div>
</div>
</div>
</div>
<div class="row mb-3 mt-3">
<div class="col-4 mr-5">
« Home
</div>
<div class="col-4 ml-5">
Next » </div>
</div>
</div>
My CSS code is:
<style>
.rangeslider {
width: 50%;
margin: 0 auto;
position: absolute;
}
.myslider {
-webkit-appearance: none;
background: white;
width: 100%;
height: 20px;
opacity: 0.8;
margin-top: 180px;
}
.myslider::-webkit-slider-thumb {
-webkit-appearance: none;
cursor: pointer;
background: #000080;
width: 33%;
height: 20px;
}
.col-4 {
text-align: center;
}
.myslider:hover {
opacity: 1;
}
.image {
position: relative;
width: 400px;
margin: 0 auto;
}
.image>img {
position: absolute;
display: none;
}
.image>img.visible,
.image>img:first-child {
display: block;
}
#sliderOutput>div {
display: none;
}
#sliderOutput>div.visible,
#sliderOutput>div:first-child {
display: block;
}
#p1{
height: 10px;
}
</style>
My JS code is:
<script>
window.addEventListener('load', function() {
var rangeslider = document.getElementById("sliderRange");
var output = document.getElementById("sliderOutput");
var images = document.getElementById("sliderImages");
rangeslider.addEventListener('input', function() {
for (var i = 0; i < output.children.length; i++) {
output.children[i].style.display = 'none';
images.children[i].style.display = 'none';
}
i = Number(this.value) - 1;
output.children[i].style.display = 'block';
images.children[i].style.display = 'block';
});
});
</script>
My main requirement if the slider is in the first that phrase and image should be stored in local storage like that if it is in second that details should store.
There is no enough details about what json you want to store in the localStorage so that's why i am giving you the basic idea of how you can store a json in localStorage.
Basically you can't store json in localStorage directly but you can store that json in form of a stringand then converting that string(json) into json. Here is the basic example :
// setting json to localStorage
var jsonToBeStoredInLocalStorae = {
sliderImages = [
{path : 'image-path-here'},
{path : 'image-path-here'}
],
phrase : 'your image phrase'
};
localStorage.setItem('slider_json',JSON.stringify(jsonToBeStoredInLocalStorae ));
When you want to get that json from localStorage so you will do like this
//Here you are getting that json in `string` form from `localStorage` and parsing it to `json`
var localStorageJson = JSON.parse(localStorage.getItem('slider_json'));
In localStorage you can only save text strings, so if you want to save it is only one value per record, you insert a name and value to localStorage, but if you want to save an object, you must transform it to a text string with the function JSON.stringify
I am developing a news section that contains text and images in which the images to be clicked have to show their original size. Can someone help me with this?
<?php
$select_stmt=$db->prepare("SELECT * FROM teste ORDER BY id DESC;" ); //sql select query
$select_stmt->execute();
while($row=$select_stmt->fetch(PDO::FETCH_ASSOC))
{
?>
<div class="container" id="fadein">
<div class="row">
<div class="col-sm-4">
<div id="imagem"><img src="upload/<?php echo $row['image']; ?>" class="imagem"></div>
<script src="scripts/javascript.js"></script>
</div>
<div class="col-sm-8">
<div class="col-sm-12" id="titulo"><?php echo $row['titulo'];?></div>
<br>
<div class="col-sm-12" id="sub_titulo"><?php echo $row['sub_titulo'];?></div>
<br>
<div class="col-sm-12" id="texto"><?php echo $row['texto'];?></div>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-6" align="right">Editar</div>
<div class="col-sm-6">Eliminar</div>
</div>
<br>
<br>
<br>
<p class="barra"></p>
<br>
<br>
</div>
<?php
}
?>
(Probably second part is more usefull for your use case)
If you want pure javascript, you can set a onclick event listener and get images real size (Determine original size of image cross browser?) and set this size to image. (if you want it to set to old sizes on second click, save old size to a global variable and get then set). Which will look like this:
I'm not good with pure javascript but i guess this is it.
Add this code somewhere in your file. It will run for every image
<script>
window.onload = function() {
images = document.getElementsByTagName("img");
for (var i = 0; i < images.length; i++){
images[i].onclick = function(e){
var isBig = e.target.getAttribute('isBig');
if (isBig === undefined || isBig == 'false'){
// make it big
e.target.setAttribute('isBig', 'true');
e.target.setAttribute('oldWidth', e.target.offsetWidth);
e.target.setAttribute('oldHeight', e.target.offsetWidth);
var newImg = new Image();
newImg.onload = function() {
e.target.style.width = newImg.width+"px";
e.target.style.height = newImg.height+"px";
}
newImg.src = e.target.getAttribute('src');
}
else {
// make it small
e.target.setAttribute('isBig', 'false');
e.target.style.width = e.target.getAttribute('oldWidth')+"px";
e.target.style.height = e.target.getAttribute('oldHeight')+"px";
}
}
}
}
</script>
This will set images width and height to original sizes.
If you want to make it fullscreen with absolute positioning, you need to create a new element and img tag. And you just need to set its src to image's src. Then you can show that image. Example:
<!-- add this somewhere in body -->
<!-- container -->
<div id="bigImage" style="z-index: 4; position: fixed; width: 100%; height: 100%; top: 0; left: 0; visibility: hidden;">
<!-- background. not necessary but usefull for close thing. -->
<div style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0, 0, 0, .7); cursor: pointer;" onclick="closeImage()"></div>
<!-- image element. object-fit: contain; for full window size -->
<img src="<?php echo $row['image']; ?>" alt="bigImage" id="bigImageChild" style="position: absolute; top: 5%; left: 5%; z-index: 6; width: 90%; height: 90%; object-fit: contain;">
<!-- close button -->
<span onclick="closeImage()" style="position: absolute; right: 20px; top: 20px; font-weight: 900; color: white; cursor: pointer;">X</span>
</div>
<!-- script for image -->
<script>
function closeImage() {
document.getElementById("bigImage").style.visibility = 'hidden';
}
images = document.getElementsByTagName("img");
for (var i = 0; i < images.length; i++){
// on image click
images[i].onclick = function(e){
// set image src
document.getElementById("bigImageChild").src = e.target.src;
// show image
document.getElementById("bigImage").style.visibility = 'visible';
}
}
</script>
I need to set the image on is original size when i click on the first time and the second click to the image go back to is original size defined in the html.
I have div with questions
Here is it
Here is code for it
<div class="listdivright">
<div style="height: 80%; width: 100%; overflow: auto">
#foreach (var item in Model)
{
<div class="title" style="margin-top:15px;margin-left:15px; margin-bottom: 10px;">
<img class="click" src="#Url.Content("~/Images/plus_plus.png")" />
<span>
#Html.TextBoxFor(modelItem => item.question, new {#class="testclass", #readonly = "readonly" })
</span>
<a class="click2" style="margin-left:10px;">
<img src='#Url.Content("~/Images/arrow.png")' />
</a>
<a style="margin-left:25px;" href='#Url.Action("Edit", "Questions", new {id = item.QuestionId})'>
<img src='#Url.Content("~/Images/Edit.png")' />
</a>
<a href='#Url.Action("Delete", "Questions", new {id = item.QuestionId})'>
<img src='#Url.Content("~/Images/Delete.png")' />
</a>
</div>
<div class="content" style="margin-left:60px; width: 80%; height: 100px; background: white">
<div style="width: 100%">
<div style="float:left; width: 50%;">
<b>#Html.LabelFor(modelItem=>item.TimeForAnswer)</b>
<b>:</b>
<span>#Html.DisplayFor(modelItem=>item.TimeForAnswer)</span>
</div>
<div style="float:right;width: 50%;">
<b>#Html.LabelFor(modelItem => item.TimeForReady)</b>
<b>:</b>
<b>#Html.DisplayFor(modelItem => item.TimeForReady)</b>
</div>
</div>
<div style="width: 100%; text-align: center;" >
<b>#Html.LabelFor(modelItem => item.Retries)</b>
<b>:</b>
<b>#Html.DisplayFor(modelItem => item.Retries)</b>
</div>
</div>
}
</div>
I use JS to move block to left div
Code of JS script
<script type="text/javascript" >
$('.title').on('click', function () {
$(this).next().toggle();
});
$('.click2').click(function () {
var elem = $(this).closest('.title');
$('.title2').append($(elem).html()).show();
});
Here is code of left div
<div class="listdivleft">
<div style="height: 80%; width: 100%; overflow: auto">
<div class="title2" style="margin-top: 15px; margin-left: 15px; margin-bottom: 15px;padding-top: 10px">
</div>
</div>
</div>
I need to limit blocks in left div. From 0 to 10.
So it can be 0 or not more than 10
How I can do this?
You can check that if element with class title are less than 10 using length property, in that case only the new html should be appended, something like:
if($(".title").length < 10) {
var elem = $(this).closest('.title');
$('.title2').append($(elem).html()).show();
}
else {
alert("No more than 10 allowed.");
}
or if title class is reused other places as well on page, then restrict it to current parent element using listdivright class element in combination with closest and find :
if($(this).closest(".listdivright").find(".title").length < 10) {
var elem = $(this).closest('.title');
$('.title2').append($(elem).html()).show();
}
else {
alert("No more than 10 allowed.");
}
Hope it helps and gives you idea how it can be done.