I've few div's which are generated dynamically.
I would like to detect inside which div content was entered and then perform some action on the other div's.
For example -
<div class="example"></div>
<div class="example">Some random text</div>
<div class="example"></div>
If I have the above 3 div's and I enter in some content inside the 2nd div, I would like to detect inside which example class div the text was entered and then perform some action on the remainder of the div's, say make the border red or enter in some paragraph tags.
How could I do this using javascript or jquery ?
You can filter out the filled divs and then do your action on the result:
$('.example').filter(function() {
return $(this).text().trim() === '';
}).text('test');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="example"></div>
<div class="example">Some random text</div>
<div class="example"></div>
The above will assign the text test to the empty divs only.
You can use .not() to eliminate the element that triggered the event. I'm not sure how your text that triggers the event gets into the div, so I'll give an example using the click event:
$(document).ready(function() {
$('.example').on('click', function() {
$('.example').not(this).each(function() {
console.log($(this));
//do something with $(this)
});
});
});
(You will need to change 'click' to the appropriate event.)
Related
This question already has an answer here:
How to get the selected element inside a contenteditable element
(1 answer)
Closed 10 months ago.
I have a sample at Finding currently focused span in an editable div.
The editable div i.e. a div having the attribute contenteditable="true", contains 3 different spans with each span wrapped in a div. A user could position the cursor in any one of the three spans. My goal is to find out which span is being edited when user clicks on a span content to start editing or types into it. I would like this to work on desktop or mobile devices.
I tried getting the span using document.activeElement as you can see in my code sample, but it gets the editable div and not the current span. I was looking for a JavaScript solution to this problem.
Question:
How would I get the id of span element whose text is being edited using JavaScript?
Html code
<div id="input" contenteditable="true" onfocus="findCurrentSpan(this)">
<div>
<span id="first">first span</span>
</div>
<div>
<span id="second">second span</span>
</div>
<div>
<span id="third">third span</span>
</div>
</div>
<p id="info" style="color:green">
</p>
Javascript code
function findCurrentSpan(editor) {
var element = document.getElementById("input");
var currentSpan = document.activeElement;
document.getElementById("info").innerHTML = "Active element's id is " + currentSpan.id;
}
The Problem is, that you are going to select the active element from the whole Page, that's why it is called document.activElement.
Have a look a this SO Question Get and set cursor position with contenteditable div
In your example findCurrentSpan(this) this is referring to the function findCurrentSpan() so this.id will have the value input.
<div id="input" contenteditable="true" onfocus="findCurrentSpan(this)">
To solve your problem, I recommend you bind an onfocus event to all of input's children (explanation on how the onfocus event works in javascript).
This is how you select all the span elements inside input:
var children = document.getElementById("input").querySelectorAll('span');
After selecting the elements you want to bind an event to. Use a loop to bind an event to all the elements. As far as I know span doesn't implement a focus state so we will have to use click.
children.forEach(function(e) {
document.getElementById(e.id).addEventListener("click", findCurrentSpan)
})
The code will look like this:
function findCurrentSpan() {
console.log(this.id)
document.getElementById("info").innerHTML = "Active element's id is " + this.id;
}
var children = document.getElementById("input").querySelectorAll('span');
children.forEach(function(e){
document.getElementById(e.id).addEventListener("click", findCurrentSpan)
})
So I have a very basic need here and I can't figure out why it does not work.
For testing purpose I have 100 div's with id's of d_fav100, d_fav101, etc ...
And it just looks like a bunch of these
<div id='d_fav100'>This is DIV 100</div>
.
.
.
My jquery catch to grab the divs looks like this ...
$("[id^='d_fav']").click( function() {
var fav = $(this).val();
alert(fav);
});
However, I cannot get the value in the div assigned to the variable fav. The alert is always blank.
What am I missing?
Thanks for looking!
JT
For a div, you should use the .text() method:
Codepen
$("[id^='d_fav']").click( function() {
var fav = $(this).text();
alert(fav);
});
.val() will get the value for inputs/textareas.
Jquery's text()
It seems you need to delegate the event. Also div does not have any value attribute. If you want to get the text use jquery text method
$('body').on('click' ,"div[id^='d_fav']",function(e){
console.log($(this).text().trim())
})
DEMO
If I understand correctly - you do not want the actual text of the div, but the value (number) of the div - ie: the 100 portion - which is the same in the id of the div.
Use a class and get the id from the div on the click event - remove the d_fav portion using substr(5) - and the remainder is the number you are after.
if it is the text you are after - then you can use the same code but use the .text() method as already described.
$(".d_fav").click( function() {
var fav = $(this).attr('id').substr(5);
alert(fav);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="d_fav" id='d_fav100'>This is DIV 100</div>
<div class="d_fav" id='d_fav101'>This is DIV 101</div>
<div class="d_fav" id='d_fav102'>This is DIV 102</div>
I have sections (divs) with text in it, but when the text is too long I made it so the text "fades" (with css) and displays a "show more" button, which shows the full text for that specific div when clicked. The problem is that it only works for the first div, and I believe it's because they all have the same class and id name. What's the best way to get around that? Here's my code:
HTML:
<div id="fade-container">
<div id="fade-content">
<p>
Long text goes here...
<div class="fade-anchor"><span class="btn-primary round-xl small btn-shadow">Show more</span></div>
</p>
</div>
</div>
Script:
<script>
$('.fade-anchor').click(function(e){
e.preventDefault();
$('#fade-content').css('max-height','none');
$('.fade-anchor').remove();
});
</script>
By the way, info is being fetched from the database in a php while loop.
When the user clicks on .fade-anchor you can use thisto get the element currently selected, you should also use classes instead of ids for multiple elements, like so:
$('.fade-anchor').click(function(e){
e.preventDefault();
$(this).parent('.fade-content').css('max-height','none');
$(this).hide(); // Maybe you should hide instead of removing, in case you want to add a toggle effect later on.
});
You can also check out this jsFiddle with the working version.
Hope it helps.
You can achieve it by e.currentTarget
$('.fade-anchor').click(function(e){
e.preventDefault();
$(e.currentTarget).css('max-height','none');
$('.fade-anchor').remove();});
hi i would like to select the parent div of currently placed cursor in a contenteditable div.
the process is, there are multiple contenteditable div in a page. i'd like to select the div which the caret/ cursor is currently positioned. so that using jquery i could change the css.
following is my html code of the div:
<button id="changer">change color</button>
<div id="container">
<div class="section" contenteditable="true">
<p>this is my editable paragraph</p>
</div>
<div class="section" contenteditable="true">
<p>this is my editable paragraph 2</p>
</div>
</div>
following is my jquery code so far:-
$('#changer').click(function(){
document.activeElement.css({'background':'black'});
});
but this gives me the error :- Uncaught TypeError: undefined is not a function
edit:-
the process is when the user clicks a button a color palette lightbox will appear. on click of any of the color on the color palette. the jquery is going to select the currently focused contenteditable div. and change the css.
i want to know how to select the currently focused contenteditable div using jquery.
So the code below console logs the text inside the contenteditable div which is focused. if you write $(this) inside the event handler it will reference the currently div focused
$('[contenteditable="true"]').focus(function(){
console.log($(this).text()); // for example, do whatever you please here
// you said you want to find the parent div of the element focused
var $parent = $(this).parent();
// now $parent is a reference of the parent div of the focused element
});
The tricky thing is that when the user clicks the button, the contenteditable is not focused anymore. so let's make a variable where we store our last focused contenteditable div , and when the user clicks a button, the changes will be made on that very variable.
like so :
var lastFocused;
$('[contenteditable="true"]').focus(function(){
lastFocused = $(this);
});
$('#changer').on('click', function(){
console.log(lastFocused);
lastFocused.css('background-color', 'red');
})
see codepen : here
So I think what you are trapped is how to get the div[contenteditable] which was focused.
The idea is to store the item when it was trigger by a focus event.
$(function() {
var $focus_item = null;
$('[contenteditable]').focus(function() {
$focus_item = $(this);
});
$('#changer').click(function(){
$focus_item.css({'background':'black'});
});
});
I have an ASP.NET repeater, which contains 3 divs inside the ItemTemplate.
Each div, in turn has a number of html elements. I would like to reference an element in the first div (the 3 divs are placed vertically and parallel to each other from left to right).
I have a button in the 3rd div. When pressed, I want to be able to select an element which is contained within the first div.
This is the code I've got so far:
$("#editButton").click(function () {
var nameBox = $(".nameBox", $(this).parent());
});
I'm not really sure how to select the element within the first div though. Could anyone kindly suggest some code please?
Just get the siblings and find the element with the class name.
Assuming your markup is like this:
<div>
<div class="namebox">found me</div>
</div>
<div>
</div>
<div>
<input type="button" id="btn" value="click"/>
</div>
$("#editButton").click(function () {
var nameBox = $(this).parent().siblings(':eq(0)').find('.nameBox');
});
jsFiddle Example
Why dont you assign an id to the div? Or use the first selector http://api.jquery.com/first-child-selector/