change order of elements after click() - javascript

I wont to change order of paragraphs(the one clicked by user should be at the top). I came up with this:
<div>
<p>11111111</p>
<p>22222222</p>
<p>33333333</p>
</div>
$("p").click(function(){
var a = $(this).index();
if (a != 0) {
$(this).clone().prependTo("div");
$(this).remove();
}
})
but it works just "once".
http://plnkr.co/edit/6VlWbIlGi7fDBv6d0WT2?p=preview

You're not very far off, it's actually easier than that: Just prepend the element to its own parent with prependTo:
$("p").click(function() {
var $this = $(this);
$this.prependTo($this.parent());
});
<div>
<p>11111111</p>
<p>22222222</p>
<p>33333333</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
If you want, you don't even really need jQuery for it:
$("p").click(function() {
this.parentNode.insertBefore(this, this.parentNode.firstChild);
});
<div>
<p>11111111</p>
<p>22222222</p>
<p>33333333</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

You can use .insertBefore(); and you need to jQuery event delegation as well
$("div").on('click','p:not(:nth-child(1))',function(){
$(this).insertBefore('p:nth-child(1)');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p>11111111</p>
<p>22222222</p>
<p>33333333</p>
</div>

Related

JavaScript loop over clickable elements on click event, and skip the specific clicked element

<div>
<div class="clickable">1</div>
<div class="clickable">2</div>
<div class="clickable">3</div>
<div class="clickable">4</div>
</div>
Upon clicking one of the 'clickable' elements i want to add a new class to all elements with 'clickable' class except the one that has been clicked.
$('.clickable').on('click', function (e) {
$('.clickable').each(function () {
$(this).addClass('new-class')
});
})
How, inside the loop, can i skip the specific element that was clicked?
$('.clickable').on('click', function() {
$(this).removeClass('new-class').siblings().addClass('new-class');
});
This is the simplest to control and read
You do not need the each
$('.clickable').on('click', function(e) {
$('.clickable').addClass('new-class');
$(this).removeClass('new-class');
})
.new-class {
color: red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class="clickable">1</div>
<div class="clickable">2</div>
<div class="clickable">3</div>
<div class="clickable">4</div>
</div>
If they are surely all in the same container, you can use siblings.
To chain you MUST remove before adding
$('.clickable').on('click', function(e) {
$(this)
.removeClass('new-class') // still necessary for the second click of another element
.siblings().addClass('new-class');
})
.new-class {
color: red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class="clickable">1</div>
<div class="clickable">2</div>
<div class="clickable">3</div>
<div class="clickable">4</div>
</div>
There is a not method in jQuery so the simplest thing you can do in my opinion is with the help of not method like below:
$('.clickable').on('click', function (e) {
$('.clickable').not(this).addClass('new-class');
})

Jquery how to use $(this) to get value of clicked item?

I have trouble getting value of particular item that I'd clicked
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(this).click(function(){
alert($(this).find("button").html());
});
});
</script>
</head>
<body>
<p>test 1</p>
<p>test 2</p>
<button>Yes</button>
<button>No</button>
</body>
</html>
I'd tried $(this).find("button").html(), but it will return the value of 1st button("Yes) even if I clicked the 2nd button("No")
Same for $(this).find("p").html(), will return value of 1st
How do I use $(this) to get the value of item I clicked?
Don't suggest me to insert class or id, I'm not suppose to touch the html.
Please assist, thanks.
this in your click handler is always the document (which you've bound the handler to), so that doesn't help anything. Instead, use something like
$(document).click(function(e){
if ($(e.target).is("button"))
console.log($(e.target).text());
} else {
console.log("not clicked (directly) on a button");
}
});
or rather just
$(document).on("click", "button", function(e){
console.log($(this).text());
});
It is because $(this).click event listener is added to document object and not any specific html element.
$(document).ready(function(){
$('button,p').on('click',function(){
alert($(this).html());
});
});
plunker: https://jsfiddle.net/wx38rz5L/1743/
If you are trying to get each button's html on click, use this.
$('button').click(function () {
alert($(this).html());
});
Bind the click event on both button and get the content of the html element with innerHTML.
$(document).ready(function() {
$('button').click(function(event) {
alert(event.target.innerHTML);
});
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<p>test 1</p>
<p>test 2</p>
<button>Yes</button>
<button>No</button>
</body>
</html>
You have to detect which $(this) is binded for ? Try something like this:
Setup an object
<button class="btn red btn-xs editbtn" type="button" value="${rs.id}" value="${rs.id}">
Function for this object
$(function(){
$('.editbtn').click(function(e){
common.showSpinner();
var idbbpdtd = $(this).val();
});
});
Try this.
$(document).ready(function() {
$(this).click(function(event) {
alert(event.target.innerHTML);
});
});
In jQuery event.target always refers to the element that triggered the event.

How to use .after() as .html() if element exists?

Here is my code:
$('button').on('click', function(){
$('div').after('<p>this element should be unique</p>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>this is a div</div>
<button>click</button>
As you see, when I click on that <button> several times, I will see multiple element which have created, like this:
<div>this is a div</div>
<p>this element should be unique</p>
<p>this element should be unique</p>
<p>this element should be unique</p>
<button>click</button>
but I want to append that <p> after <div> only if it isn't exist, otherwise I want to replace it. Anyway I want this output: (both for one time clicking and multiple times clicking)
<div>this is a div</div>
<p>this element should be unique</p>
<button>click</button>
How can I do that?
If you will have only one p
edited
$('button').on('click', function() {
if (!($('div').next('p').length)) {
$('div').after('<p>this element should be unique</p>');
}else{
$('div').next('p').html('this will replace');
}
});
You can check to see if the element exists, and if it does update the content. Something like this should work:
var index = 0;
$('button').on('click', function(){
index++;
if($('#myWrapper').length == 0) {
$('div').after('<p id="myWrapper">this element should be unique' + index +'</p>');
} else {
$('#myWrapper').html('<p>this element should be unique' + index +'</p>');
}
});
JS Fiddle example: https://jsfiddle.net/igor_9000/44mgz316/3/
Hope that helps!
Without knowing how you're generating that <p> elements, here you can check some generic solution, and implement your own logic
var text;
$('#text').on('change', function() {
text = $(this).val();
});
$('button').on('click', function() {
if ($('div').next('p:contains(' + text + ')').length) {
} else {
$('div').next('p').remove();
$('div').after('<p>' + text + '</p>');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="text">
<div>this is a div</div>
<button>click</button>
Better add a wrapper, and just replace its contents:
var $target = null;
$('button').on('click', function(){
if(!$target) $target = $('<div></div>').insertAfter('div');
$target.html('<p>this element should be unique</p>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>this is a div</div>
<button>click</button>

Changing a div's id on click

How do I add an onClick listener to a div.
I want to change the name of a div to divclass active if it was inactive previously & then remove the word 'active' if user click on the list again.
I'm at a loss how to do this.
This is what I've tried so far
<script>
$function tog(){
$(this).toggleClass('active');
return false;
}
$(function() {
var dd = new DropDown( $('#dd') );
$(document).click(function() {
// all dropdowns
$('.wrapper-dropdown-4').removeClass('active');
});
});
</script>
where the div whose class name I want to change is defined as below
<div id="dd" onclick="tog()" class="wrapper-dropdown-4">
<!--something-->
</div>
I've tried this..
<html>
<head>
<script>
$('#dd').on('click', function(){
$(this).toggleClass('active')
});
</script>
<style>
.active {
color: red;
}
</style>
</head>
<body>
<div id="dd" class="wrapper-dropdown-4">
ddddd
</div>
</body>
</html>
What's wrong with this now?
I'm inspecting the element id via chrome developer's tool & I don't see any change using this code. So, can anyone please help?
Thanks. :)
The only script you need is
$(function(){
$('#dd').on('click', function(){
$(this).toggleClass('active')
});
});
Demo: Fiddle
you have to pass the object $(this) is not recognizable , use tog(this)
<script>
function tog(obj)
{
$(obj).toggleClass('active');
return false;
}
$(function() {
var dd = new DropDown( $('#dd') );
$(document).click(function() {
// all dropdowns
$('.wrapper-dropdown-4').removeClass('active');
});
});
</script>
<div id="dd" onclick="tog(this)" class="wrapper-dropdown-4">
<!--something-->
</div>
not the best way to do it, you can bind the event ,by registering the click in the event.

Bind a jquery function to elements

I am very new to jquery and need some help. I am trying to change a css element when I enter a textbox. I have applied a css class to my textboxes and I have a couple of div tags around my textboxes.
When a user selects the textbox I want to change the desired div tag.
This is how the html looks
<div class="left">
<div class="right">
<input name="myTextBoxID" type="text" id="myTextBoxID" class="myTextBox" />
<span id="rfInput"></span>
</div>
</div>
my jquery looks like this
<script language="javascript" type="text/javascript">
$(function () {
$('.myTextBox').focus(function () {
$('.box.left').addClass("active");
}).blur(function () {
$('.box.left').removeClass("active");
});
});
</script>
Now the jquery is working and changes the class on focus and blur however it effects all elements witht he class="myTextBox" how can I get jquery to attach to all elements however only fire the css change to the selected textboxes outside elements class?
Any help would be great!
<script language="javascript" type="text/javascript">
$(function () {
$('.myTextBox').focus(function () {
$(this).closest('.left').addClass("active");
})
.blur(function () {
$(this).closest('.left').removeClass("active");
});
});
</script>
this refers to the element that received the event.
So you wrap this into a jQuery object, $(this) and access the closest() ancestor with the class you designate.
.closest() - http://api.jquery.com/closest/
you were not that clear, so, here,s my guess...
$(function () {
$('.myTextBox').focus(function () {
$(this).closest('.left').addClass("active");
}).blur(function () {
$(this).closest('.left').removeClass("active");
});
});

Categories