I am trying to get the two randomly generated div ID's shown below and wrap them within my custom div that I can control. Was searching around on jQuery API for solution but still no ideas.
Here's a preview of example:
Okay so as you can see, there are two <div id="random_string"></div> and one custom <div class="wrap_awm"></div>
Since I can't target the two ID's from above I have no clues how to tell jQuery, get the two div's from above wrap_awm and put them inside of the ".wrap_awm". Simple as that?
What you're looking for is called .prevAll():
var $wrap = $('.wrap_awm');
$wrap.prevAll(':lt(2)').appendTo($wrap);
It's combined with the :lt() selector to only use the first two elements.
It's this simple:
var w = $(".wrap_awm");
w
.prev()
.prev()
.addBack()
.appendTo(w);
See a live working example at JS Fiddle
$(".wrap_awm")
.prev("div")
.appendTo(".wrap_awm")
.end()
.prev("div")
.appendTo(".wrap_awm");
You can use the .prev() function in the jquery API to select the previous sibling of your custom div. You can then store that and apply the same .prev() function on it i.e:
var previousSibling1 = $(".wrap_awm").prev();
var previousSibling2 = $(previousSibling1).prev();
You now have a reference to your two previous siblings and they can be moved to your custom div.
This is simple and readable, but probably not how it should be done...
$(document).ready(function () {
var prev1 = $('.wrap_awm').prev().prev();
var prev2 = $('.wrap_awm').prev();
$('.wrap_awm').html(prev1).append(prev2);
});
JSFiddle
Related
So I try to select a div within another div. My html goes like this:
<div id="Stage_game_page1"><div id="cube0">[...]</div><div id="cube1">[...]</div></div>
I want to select my #cube0 within my Stage_game_page specifically, with jQuery or JS.
The goal of the selection is to use it in an loop.
I tried :
var count =$("#Stage_game_page").children().length;
for(i=0; i<count;i++){
$("#Stage_game_page")$("#cube"+i)[...]
}
I don't understand what I'm doing wrong.
var count =$("#Stage_game_page").children().length;
for(i=0; i<count;i++){
$("#cube"+i);
}
This is sufficient to select the "#cube0"/"#cube1"/"#cube2" etc. especially since ids are always unique. To answer the question $("#cube0", "#Stage_game_page")... that is how you select a div in another div
The id attribute should only be used once! I see above that you're using id="cube0" twice. If you want your divs to be recognized in multiple instances, use a class instead (the . instead of the #). Using the same id twice will probably break your script.
I believe for your html, you could use id "cube0", "cube1", etc., as long as you're ok with entering them manually. That should work for the loop you'd like to use.
Loops through each div that starts with the id cube inside Stage_game_page1
$("#Stage_game_page1 > div[id^='cube']").each(function () {
alert($(this).html());
});
JSFiddle
Child Selctor
Starts with Selector
use each() for loop.
$('#Stage_game_page1').children().each(function(index) {
// your code here with index starts from 0
});
or this using jquery attribute starts with selector
$('#Stage_game_page1').find('[id^="cube"]').each(function(index) {
// your code here
});
You need to use .find() or .children() or the like.
The correct jQuery usage would be
$("#Stage_game_page").find('#cube'+i)
to find a div with that id inside the container #stage_game_page
You have duplicate cube0 in your html code..
and i think the look should contain something like that:
$("#cube"+i)[...]
One another solution is:
$("#Stage_game_page1 div[id='cube0']")
Currently, I have this code:
$(document).ready(function(){
// #filtertab-00 replace this with your element id
$('#filtertab-00 .box-content .es-nav .elastislide-next, #filtertab-00 .box-content .es-nav .elastislide-prev').click(function() {
// trigger lazy load
$("#filtertab-00 img.lazy").each(function(i) {
$(this).delay(150*i).fadeIn(1000, function() {
var src = $(this).attr("data-original");
$(this).attr('src',src);
});
});
});
});
and i want to use this function to target object names (id) as below:
filtertab-00
filtertab-10
filtertab-20
filtertab-30
filtertab-40
filtertab-50
filtertab-60
....
filtertab-90
Does anyone know how to use the loop function to get it work?
i just want this:
when i click pre or next button after i select a tab(name varies from filtertab-00 to filtertab-90),it will activate lazyloading for images at current selected tab.
any idea is welcome!
Perhaps you could use jQuery's attribute-starts-with selector. You can then just select all IDs that begin with filtertab- using jQuery like this:
$('div[id^="filtertab-"]').each( //magic goes here );
Note: This method is slow because it has to search the DOM for elements with IDs that meet the criteria, but it does the job. I've never noticed an appreciable latency.
This is solved through selector magic as filoxo described but since you want the images, here's another version involving find() to get your actual images.
$('div[id^="filtertab-"]').find("img.lazy").each(function(i) {
$(this).delay(150*i).fadeIn(1000, function() {
var src = $(this).attr("data-original");
$(this).attr('src',src);
});
});
In addition to that, check out the impressive list of jQuery selectors. They cover a lot of ground :)
I have requirement where I wanted to find the amount fields like $412,341.40 from document.
I tried $("div:contains($)").css("background-color","yellow") but it returning parent div's also, and i just wanted color the child ones.
for e.g see the below image, the above jquery coloring both div's parent and child.
How can i color child div only? I am trying find all div's which contains string like $123,55.60.
Any help is greatly appreciated.
This will give your the direct parent.
$('div>:contains("$")').last().css("background-color","yellow")
JSFIDDLE DEMO
EDIT: The above will work great for only one occurrence of $. For multiple occurrences of text, use below code. This makes use .each() and looks for a closing </div> tag each time.
var divs = $('div>:contains("$")');
divs.each(function() {
var htmlinner = $(this).html();
if(htmlinner.indexOf('</div>') == -1) {
$(this).css("background-color", "yellow");
}
});
JSFIDDLE DEMO[2] for multiple occurrences
use:
$("div:contains('$')").find('div').css("background-color","yellow")
When I click on a link, I need to find the next <section> that has an ID attribute and return its ID.
So given the following markup and javascript, I would expect clicking on the link to write "section_3" to the console.
<section id="section_1">
Find
</section>
<section></section>
<section id="section_3"></section>
<section id="section_4"></section>
and
$('a.findNext').click(function() {
var nextSectionWithId = $(this).closest("section").next("section[id]");
if (nextSectionWithId) {
var sectionId = nextSectionWithId.attr('id');
console.log(sectionId)
}
});
But this doesn't work. I have set the code up here in jsFiddle.
Any ideas why this is not working?
Try :
var nextSectionWithId = $(this).closest("section").nextAll("section[id]:first");
or
var nextSectionWithId = $(this).closest("section").nextAll("section[id]").filter(':first');
Fiddle
You cannot use next because next will look for a match only in the next element. So you can instead use nextAll combined with :first in the selector.
Update
You can use the first() method in jquery to fetch the first element in the collection as well which seems like a faster option.
var nextSectionWithId = $(this).closest("section").nextAll("section[id]").first();
Probably could be this reason:
Because :first is a jQuery extension and not part of the CSS specification, queries using :first cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. To achieve the best performance when using :first to select elements, first select the elements using a pure CSS selector, then use .filter(":first").
Coutesy #T.J. Crowder
Use .nextAll()
DEMO
var nextSectionWithId = $(this).closest("section").nextAll("section[id]")[0].id;
DEMO
var nextSectionWithId = $(this).closest("section").nextAll("section[id]").eq(0).attr('id');
DEMO
var nextSectionWithId = $(this).closest("section").nextAll("section[id]").attr('id');
Is there any way to add classes or alter objects that is dynamically added to the body?
I am adding a range of objects to the body by javascript.
Fot instance Im adding some links that is dynamically generated and added to the body. When they are loaded I need to elect the first of the divs and add a new class to it.
I can't seem to find any way to do this... Update the DOM or how should I go around this? There must be a way to alter dynamically added objects.
Any clues?
Thanks for any help!
if you added them dynamically, then you can just use the objects you already have. Otherwise you'll need to find them with sizzle.
//create the elements
var $link1 = $('<a>click me</a>').attr('href','page1.html');
var $link2 = $('<a>click me</a>').attr('href','page2.html');
//append the elements
$('#some-links').append($link1).append($link2);
//use the element we created
$link1.addClass('my-class');
//find the second link element using sizzle
$('#some-links>a').eq(1).addClass('my-other-class');
demo: http://jsfiddle.net/PtebM/2/
Well of course you caN:
var a = $('<a>');
a.html('new link').appendTo('#menu');
a.addClass('border');
or
var a = $('<a>');
a.html('new link').appendTo('#menu');
$('#menu a').addClass('border');
fiddle http://jsfiddle.net/4NPqH/
Why not just add a class name to your generated elements?.
I.e.:
$('span').html('Hello world').addClass("fancyText").appendTo('body');