How to replicate function on similar divs with same function - javascript

If I have li which contains a function (duplicate on keyup), how can I replicate that same function to a clone of that same li.
this is the element (li, better said), which will be constantly duplicated
<li class="main-item">
<div class="header-item fwidth">
<div>
<h1 class="duplicado fleft"></h1>
</div>
</div>
<div id="internal-items-2" class="collapse collapsible-item">
<div>
<input type="text" value="" class="duplicante nombre-item">
</div>
</div>
</li>
this is the duplicate on keyup function, which produces text on the H1 element according to what is written on the input
$(function() {
$('.duplicante').on('keyup', function() {
var text = $(this).val();
$('.duplicado').text(text);
});
});
How to make that function works for each duplicated li element?
Fiddle example

If I understand correctly, what you want is to updated the individual headers upon keyup.
One way to do it would be like this:
$(function() {
$('.duplicante').on('keyup', function() {
var text = $(this).val();
$(this).closest('li').find('.duplicado').text(text);
});
});
here is the fiddle:
http://jsfiddle.net/s16vds6n/1/

Related

JQuery - Detecting which div box was clicked

I'm trying to detect which div box was clicked with JQuery and I'm not sure what I am doing wrong. I'm aware that I can approach this in a different method by directly calling functions if a div box is clicked, but I wish to do it this way by first determining what was clicked.
$(document).ready(function() {
$(document).click(function(event){
var id = event.target.id; //looks for the id of what was clicked
if (id != "myDivBox"){
callAFunction();
} else {
callSomeOtherFunction();
}
});
});
Thank you for any suggestions!
You could use the closest function to get the first ancestor element with tag div, see following example:
$(document).ready(function() {
$(document).click(function(event){
var parentDiv = $(event.target).closest("div");
console.log(parentDiv.prop("id"));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">
<span id="span1">Test1</span>
</div>
<div id="div2">
<span id="span2">Test2</span>
</div>
I hope it helps you. Bye.
No matter what you click, you will always know the element that was clicked:
$("#myDiv").click(function(e){
alert("I was pressed by " + e.target.id);
});
Knowing that you don't want to add this to every div, and you have your click on your document, you'll need to figure out what divs can be reported as "clicked".
In order to do this you'll either need a strict hierarchy of elements in your DOM (which is anoyingly bad) or you can decorate "clickable" div's with a specific class.
Fiddle - similar to below. https://jsfiddle.net/us6968Ld/
I would use closest in Jquery to get the result you want.
$(document).ready(function() {
$(document).click(function(event){
var id = event.target.id;
var clickDiv = $(event.target).closest('div[class="clickable"]');
alert(clickDiv[0].id);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="clickable" id="clickable1">
<span id="foo"> click me - Foo - clickable 1</span>
</div>
<div id="notClickable1">
<div class="clickable" id="clickable2">
<span id="span1">
Click Me Inside Span 1 - clickable 2
</span>
</div>
<div class="clickable" id="clickable3">
<div id="notClickable2">
<div id="notClickable3">
<span id="click me">Click Me - clickable 3</span>
</div>
</div>
</div>
</div>
try this:
$('div').click(function() {
alert($(this).attr('id'));
});
https://jsfiddle.net/1ct0kv55/1/

Show content only from the clicked link and hide all siblings

as stated in the name, i have a menu with links, and i have a list of sections which i want to show/hide on the click of the menu.
What i want here is to be dynamic in a sense that if i add more menus and sections I don't have to change the code that does it, or to add new tags or names.
I tried doing something myself but I'm probably missing something..
Any assistance would be appriciated
I have a simple example on this jfiddle: https://jsfiddle.net/s07ysx6w/6/
HTML:
<div id="header">
<div id="menuBlock">
<ul id="menu">
<li>Novosti</li>
<li>Program Mladi</li>
<li>Program Odrasli</li>
<li>Program Upisi</li>
<li>Galerija</li>
<li>Kontakt</li>
</ul>
</div>
</div>
<body>
<div id="main">
<div id="novosti" name="sekcija1" class="sekcija">
aaaa
</div>
<div id="programMladi" name="sekcija2" class="sekcija">
aaaa
</div>
<div id="programOdrasli" name="sekcija3" class="sekcija">
aaaa
</div>
<div id="programUpisi" name="sekcija4" class="sekcija">
aaa
</div>
<div id="galerija" name="sekcija5" class="sekcija">
aaaa
</div>
<div id="kontakt" name="sekcija6" class="sekcija">
aaa
</div>
</div>
</body>
Javascript:
$(document).ready(function() {
$("#menu").click(function(e) {
var selected = this.attr('href');
$('#main' + selected).show('slow').siblings().hide('slow');
});
});
EDITED:
Copy/pasting made me careless so now there are only unique id's. Also replaced the fiddle with a working one (solution).
UPDATE:
In case anyone uses slicknav as a plugin on his/her's page, to get to the element you have in your menu you need to find how exactly slicknav injected it into your page. For instance, in my case, since i prepend it to my #menuBlock div tag. In order to find the element #novosti i had to dig in deep, since slicknav creates tags on its own in order to work the way it does.
In that case my javascript looked like this.
$(document).ready(function(){
$("#menuBlock div ul li a").click(function (e){
e.preventDefault();
var selected = $(this).attr('href');
$( selected ).fadeIn('slow').siblings().hide();
});
});
There should a space between 2 selectors if they have a parent child relationship, so change this line
$('#main' + selected).show('slow').siblings().hide('slow');
to
$('#main ' + selected).show('slow').siblings().hide('slow');
or simply the selected one (since it is already pointing to a specific element)
$(selected).show('slow').siblings().hide('slow');
check this updated fiddle
$(document).ready(function(){
$("#menu li a").click(function (e){ //bind the event on `a` rather than ul
var selected = $(this).attr('href'); //use $(this) instead of this
$( selected ).show('slow').siblings().hide('slow'); //explained above
});
});
There are more than one errors found in your code,
set a Jquery library
Id should be unique throughout the DOM
Replace this.attr with $(this).attr()
Descendant selector would be #menu #something not #menu#something
Should .stop() an animation before beginning the new one.
Try,
$(document).ready(function() {
$("#menu li a").click(function(e) {
e.preventDefault()
var selected = $(this).attr('href');
$('#main ' + selected).stop().show('slow').siblings().hide('slow');
});
});
DEMO
Try this method
$(document).ready(function() {
$("#menu a").click(function(e) {
debugger;
var selected = $(this).attr('name');
$('#main div').hide();
$('#main div[name="'+selected+'"]').show('slow');
});
});
You are not supposed to have more than one element with the same ID on a page, so change the id on the page to something more specific. Or I'm I mistaken? From your question, you wanted something more extensible, here is an approach
$(document).ready(function(){
$("#menu").click(function (e){
var element = $(e.target).attr('href');
$('#main-divs > ' + element).show('slow').siblings().hide('slow');
});
});

jQuery take specific div's text

I have a menu where I'd like to retrieve the text within the div so I tried writing something like this
$(".link").click(function() {
var linkValue = $(".link").text();
alert(linkValue);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="menu">
<div class="link">Home</div>
<div class="link">Apartment</div>
<div class="link">Contact</div>
<div class="link">About us</div>
</div>
But it takes all the values of each class. Is it possible to make it take only the div's text I clicked?
Use this inside the click function:
$(".link").click(function(){
var linkValue = $(this).text();
alert(linkValue);
});

How do I highlight/un-highlight div if checkbox is clicked OR it's parent div is clicked?

Right now when I click on li, it is highlighted correctly. However, when I click on the checkbox itself, there is no response. How do I highlight/un-highlight the li when clicking on either the li or the checkbox itself?
I also do not wish to adjust this part of my jQuery: $('.rightP').find('ul').on( (because the elements inside the ul are generated dynamically) if possible.
HTML
<div class = "rightP">
<ul>
<li>
<div class="sender">
<span>
<input type="checkbox">
</span>
</div>
<div id=2 class="message">
<p>test</p>
</div>
...
</li>
...
</ul>
...
</div>
JQuery :
deleteIDs = [];
$('.rightP').find('ul').on("click","li",function(event) {
var checkbox = $(this).find("input[type='checkbox']");
if(checkbox.hasClass('open')){
if(!checkbox.prop("checked") ){
checkbox.prop("checked",true);
$(this).css({'background-color':"#EEEEEE"});
$(this).find('div.message').each(function(){
deleteIDs.push($(this).prop('id'));
});
} else {
checkbox.prop("checked",false);
$(this).css({'background-color':"white"});
$(this).find('div.message').each(function(){
var deleteID = $(this).prop('id');
deleteIDs = $.grep(deleteIDs,function(value){
return (value!=deleteID);
});
});
}
}
});
I think if you want handle li click. You must not use check checkbox. You image and change it src to click.png when click and noclick.png when no click. Hope this help!
Ok if you dont want image i mention you my full code no use image, it work ok
<!DOCTYPE html >
<html >
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<div class = "rightP">
<ul>
<li>
<div class="sender">
<span>
<input type="checkbox">
</span>
</div>
<div id=2 class="message">
<p>test</p>
</div>
</li>
</ul>
<script>
deleteIDs = [];
var isnotcheck=true;
var clickcheckbox=false;
$('.rightP').find('ul').on("click","input",function(event) {
clickcheckbox=true;
isnotcheck=!isnotcheck;
});
$('.rightP').find('ul').on("click","li",function(event) {
;
if(!clickcheckbox)
{
isnotcheck=!isnotcheck;
}
var checkbox = $(this).find("input[type='checkbox']");
clickcheckbox=false;
if(!isnotcheck ){
checkbox.prop("checked",true);
$(this).css({'background-color':"#EEEEEE"});
$(this).find('div.message').each(function(){
deleteIDs.push($(this).prop('id'));
});
} else {
//alert(checkbox);
checkbox.prop("checked",false);
$(this).css({'background-color':"white"});
$(this).find('div.message').each(function(){
var deleteID = $(this).prop('id');
deleteIDs = $.grep(deleteIDs,function(value){
return (value!=deleteID);
});
});
}
});
</script>
</div>
</body>
</html>
You look two event. li click and checkbox click , two event occured if you click on checkbox if no one event occured. You can see my variable
var isnotcheck=true;
var clickcheckbox=false;
to know click or not click checkbox.
Hope this help!
Rather than this line
$('.rightP').find('ul').on("click","li",function(event) {
You can try
$('.rightP').on("click","ul li",function(event) {
When you're dealing with generated content you should use deferred event handlers, here's an example using Jquery UI to apply the highlight effect when you click either the checkbox or div.
http://jsbin.com/kibicega/1/

jquery script to select previous brother

hi im using jquery mobile this is the code
<form class="ui-filterable">
<input id="filterBasic-input" data-type="search">
</form>
<div data-role="collapsible">
<h2><span>paris</span><span class="pays">france</span>
<a class="gene02"data-role="button" data-inline="true" data-mini="true">generique</a></h2>
<p>code:24</p>
</div>
</li>
<li>
<div data-role="collapsible">
<h2><span>marakeche</span>
<span class="pays">maroc</span>
<a class="gene02"data-role="button" data-inline="true" data-mini="true">generique</a>
</h2>
<p>code:3300</p>
</div>
</li>
i want wen i click on class="gene02" it will take a valu of a precedent span with class pays and put it on a form class="ui-filterable" i try to do this form class ui-filterable
$(document).ready(function () {
$(".gene02").click(function () {
$("#filterBasic-input").val($(".pays").html());
});
});
but it only select france not maroc in second div . thx for help
You can get it like:
$(".gene02").click(function()
{
var $brotha = $(this).parent().find(".pays");
//$brotha is your element
});
http://jsfiddle.net/p7ENh/
http://jsfiddle.net/p7ENh/1/
$(".gene02").click(function () {
$("#filterBasic-input").val($(this).prevAll(".pays").html());
});
If it's always the first previous sibling you can also use $(this).prev() instead.
Basically from a class selector or a collection of elements, if you access any of its properties/values, it will return the value of the first one in the collection only.
Try,
$(document).ready(function() {
$(".gene02").click(function() {
var xOutput = '';
$('.pays').each(function(){ xOutput += $(this).html(); });
$("#filterBasic-input").val(xOutput);
});
});
$(document).ready(function() {
$(".gene02").click(function() {
$("#filterBasic-input").val($(this).closest('div').find('.pays').html());
});
});

Categories

Resources