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.
Related
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 :)
I wish to display certain divs inside a main div dependent on which image is clicked. With out any decent knoweldge of Js or Jquery, I fail to do this without some assistance.
<form>
<input type="hidden" name="prod">
<div id="images">
<img id="one" src="http://lorempixel.com/200/200/">
<img id="two" src="http://lorempixel.com/201/200/ ">
<img id="three" src="http://lorempixel.com/203/200/ ">
<img id="four" src="http://lorempixel.com/204/200/ ">
</div>
</form>
<div id="description">
</div>
<div class="one">Brilliant</div>
<div class="two">Super</div>
<div class="tree">Amazing</div>
<div class="four">Excellent</div>
If the image which has id="one" is clicked, then display <div class="one">Brilliant</div> inside of the description div. Then ofcause if the second image is clicked, then display the the 'super' div inside the description div. I'd like to not have the descriptions visible until clicked, and only one div at a time to be shown.
The images are apart of a form because I need to forward the value of the id on the images to a variable.
Here is the script that does that.
$('#images').delegate('img', 'click', function () {
var $this = $(this);
// Clear formatting
$('#images img').removeClass('border-highlight');
// Highlight with coloured border
$this.addClass('border-highlight');
// Changes the value of the form field prod to the file name shown in the image.
$('[name="prod"]').val($this.attr('id').substring($this.attr('id').lastIndexOf('-') + 1));
//Alert for debugging simplicity
alert($('[name="prod"]').val());
});
Perhaps a function can be implemented into the current script?
Here is a fiddle, and it will all make sense of what I have as a whole currently.
Check out this fidde
You just need to add:
$('#description').html($('.' + $this.attr('id')).html());
At the bottom of your onclick function.
** You have a typo on the 3rd div with text(tree instead of three).
You can make it bit simple by adding the divs for description in div as I see no need to put the divs for description outside the description div and later adding it. You will need to hide all the divs we have in description div and show the one that is related to img being clicked.
Live Demo
Html
<input type="hidden" name="prod">
<div id="images">
<img id="imgone" src="http://lorempixel.com/200/200" />
<img id="imgtwo" src="http://lorempixel.com/201/200" />
<img id="imgthree" src="http://lorempixel.com/203/200" />
<img id="imgfour" src="http://lorempixel.com/204/200" />
</div>
<div id="description">
<div id="one">Brilliant</div>
<div id="two">Super</div>
<div id="three">Amazing</div>
<div id="four">Excellent</div>
</div>
Javascript
$('#images').delegate('img', 'click', function () {
$('#description div').hide();
$('#' + this.id.replace('img', '')).show();
});
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 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!