I have a requirement to change the id of a form element dynamically. For example, the elements are in a sequence in form like id1, id2, id3 and id4 (the number of elements is not fixed to 4 and can be more than that). I need to add an element after id1 as id2. when this happens, the id2 which already in the form should change as id3 and id3 should change as id4 and so on. I thought of putting it in a recursive function with javascript but didn't get any idea as of now....Please help.
With jquery you can do this:
You have some html tags with class "listItem" and an id.
<div id="1" class="listItem">something </div>
<div id="2" class="listItem">something </div>
<div id="3" class="listItem">something </div>
Then the script
var i = 2;
$(".listItem").each(function() {
$(this).attr("id", i++);
});
This should change the content to
<div id="2" class="listItem">something </div>
<div id="3" class="listItem">something </div>
<div id="4" class="listItem">something </div>
This will iterate through all tags that have class "listItem" and will change the id.
I hope that helps.
Lets say your html was like this:
<div id="id1" class="list"></div>
<div id="id2" class="list"></div>
<div id="id3" class="list"></div>
You can create a function that inserts a new element in the middle and updates the ids of all the following elements in two steps as follows:
function(insertAfterId) {
jQuery('#' + insertAfterId).insert('<div id="temp" class="list"></div>');
var count = 1;
jQuery('.list').each(function() {
jQuery(this).attr("id", "id" + count);
count++;
});
}
Hope that helps!
Related
I want to specifically change the innerText of the "quantity" div from this HTML:
<div class="shop" id="shop">
<div id="1" class="item"> // Div nr. 1
<div class="details">
<div class="buttons">
<div id="1" class="quantity"> // <-- Don't change this one!
</div>
</div>
</div>
<div id="2" class="item"> // Div nr. 2
<div class="details">
<div class="buttons">
<div id="2" class="quantity"> // <-- Change this one!
</div>
</div>
</div>
</div>
I tried using document.querySelector('.quantity').innerText = "". But that only changes the first occurring div with the class "quantity", which is within "Div nr. 1".
How do I specifically target the "quantity" class within "Div nr. 2"?
Given the html you provided, you can select the second .item and then descend to its .details like so:
document.querySelector('.item:nth-child(2) .quantity').innerText="";
https://jsfiddle.net/6L8gntmh/
It would be wise to make the id`s unique if you have access to the html. Then you would be able to select by their id.
You can use querySelectorAll this allows you to modify HTML elements based on class and id not just one of each.
document.querySelectorAll('.quantity')[1].innerText = "my text"
Depending on your specific situation, it might be more useful to use a different type of selector:
document.querySelector('#id2 .quantity').innerText = ""
All ids must be unique and can start with a number, but it's a pain to select, I would recommend starting your id with a letter instead.
I have page say
<div class="wrapper" id="checkLink">
<div name="something">
<div name="something">
<bean:write name="" property=""/>
</div>
</div>
<div name="something">
<div name="something">
<div name="something">
<bean:write name="" property=""/>
</div>
</div>
</div>
</div>
I want to change any text within "checkLink" div to a hyperlink if it starts with a http/https/www
The data comes from the back end and is entered by the end users... There are 90 odd fields(Out of which anyone could be a hyperlink)
Only the matching values should appear as hyperlinks
How do I convert them into hyperlinks?
https://jsfiddle.net/w033ucrm/1/
var divs = $('#checkLink div');
$.each(divs, function(index, div){
var target = $(div).attr('name');
$('body').append(''+target+'<br/>');
});
you could also use $(div).replaceWith() but with nested divs you'd only get 2 anchors
The contact_container div holds contact children, within these children is a checkbox. I use ajax to append these children to the container. Once I append the html and click a childs checkbox. The .click does not recognize the newly added checkboxes, Only the children work on page load. Below are working samples of my HTML and Jquery.
Can you offer a solution so that the appended checkboxes are picked up when they are clicked? Thanks
Here is my HTML markup:
<div id="contact_container">
<div class="contact">
<div class="contact_checkbox">
<div class="checkbox_container">
<div class="checkbox">
<input class="testing_checkbox" type="checkbox" name="contacts[]" value="bf6b0049059ec8998601f8fe20acb68ecafe2d44">
</div>
</div>
</div>
<div class="contact_info">
<div class="contact_image">
<img src="image.jpg" width="50" height="50" alt="Profile Picture">
</div>
<div class="contact_name"><span>Caroline Airey</span>
</div>
</div>
</div>
</div>
<div id="x_message" class="inputdata" style="overflow: hidden; display: none;">
<label>Message:</label>
<span><textarea name="x_message" placeholder="Enter a message to send to your contact(s)"></textarea></span>
<div class="clear"></div>
<button class="form_button">Add Contact to Network</button>
</div>
Here is my Jquery:
$( ".checkbox" ).click(function() {
var checked = $('.testing_checkbox:checked').length;
$('#testing').val(checked);
if (checked > 0){
$('#x_message').show(1000);
}
else{
$('#x_message').hide(1000);
}
});
You will need the Parent reference to bind the element properly to jquery try this
$(parentObj).on("click",".checkbox",function() {
var checked = $('.testing_checkbox:checked').length;
$('#testing').val(checked);
if (checked > 0){
$('#x_message').show(1000);
}
else{
$('#x_message').hide(1000);
}
});
The parentObj is the div or the html element you've appended the html code with ajax call
Use this jQuery method instead:
$(".checkbox").on("click", function()
{
// Your code here
});
This will grab clicks from elements that are dynamically added to your page after it initially loads :)
Here's the HTML:
<div id="star" class="star1">
<div id="star" class="star2">
<div id="star" class="star3">
<div id="star" class="star4">
<div id="star" class="star5">
</div>
</div>
</div>
</div>
</div>
And the Javascript:
$(document).ready(function() {
$('#star').click(function(e){
e.stopPropagation();
var class_name = $(this).attr('class');
alert(class_name);
});
});
The problem I'm having is I'm only ever getting the class of the first parent div.
I want get the class from whichever div is being clicked on. Is there a way of doing this?
The ids of html element should be unique. Assign unique ids and use class selector and assign common class to group them.
Live Demo
<div id="star1" class="star">1
<div id="star2" class="star">2
<div id="star3" class="star">3
<div id="star4" class="star">4
<div id="star4" class="star">5
</div>
</div>
</div>
</div>
</div>
$('.star').click(function(e){
e.stopPropagation();
var id = $(this).attr('id');
alert(id);
});
The approach you are using is not correct but some time you are bound to use such false patterns if it is so you can do it this way.
Live Demo
$('[id=star]').click(function(e){
e.stopPropagation();
var class_name = $(this).attr('class');
alert(class_name);
});
Your code seems to be trying to find a unique identifier for each div. If that is what you are trying to do then you can switch the values of the class attribute with those of the id attribute.
HTML
<div id="star1" class="star">
</div>
JavaScript
$(document).ready(function() {
$('.star').click(function(e){
e.stopPropagation();
var id = $(this).attr('id');
alert(id);
});
});
In HTML the IDs of elements are meant to be unique whereas the class attribute can be used for multiple elements.
First of all bear this in mind, you do not use the same id for multiple tags.
<div id="star1" class="star">1
<div id="star2" class="star">2
<div id="star3" class="star">3
<div id="star4" class="star">4
<div id="star5" class="star">5
</div>
</div>
</div>
</div>
</div>
<script>
jQuery(function($){
$('.star').click(function(e) {
e.stopPropagation();
$('#out').html("My Class: "+$(this).attr('class')+ " My Id:" + $(this).attr('id'));
});
});
Please check this fiddle , this might be something you are looking for
I use this code to wrap every 3 divs in a seprate div and this works:
$('.a_paj_element:nth-child(3n)').each(function(index) {
$(this).prevAll('.a_paj_element').andSelf().wrapAll('<div class="three_paj_els" style="display:none;" />');
});
$('#paj_container > .a_paj_element').wrapAll('<div class="three_paj_els" style="display:none;" />');
I Have been trying how to assign each wrapping div its own ID in numeric order kind of like this:
<div id="1" class="three_paj_els" style="display:none;" ></div>
<div id="2" class="three_paj_els" style="display:none;" ></div>
<div id="3" class="three_paj_els" style="display:none;" ></div>
Like it Auto Increments. each ID it makes. When i try and do it I can't get it to increment.
How do I do this if it's possible?
Thanks a bunch
-sal
How about this?
var ID = 0;
$('div.three_paj_els').each(function() {
ID++;
$(this).attr('id', 'id'+ID);
});
I'm not sure whether numbers alone are valid IDs.