How can I select the popupwindow of the popup-lightbox div?
in jQuery, it's be something like $('div#popup-lightbox #popupwindow'). Unfortunatly, in Prototype, it's not that easy... anyone can help me? thanks!
<div id="popup-lightbox" class="popup">
<div id="popupoverlay"></div>
<div id="popupdiv">
<div id="popupwindow"></div>
</div>
</div>
<div id="popup-modal" class="popup">
<div id="popupoverlay"></div>
<div id="modaldiv">
<div id="popupwindow">
<div id="modalint">Your changes have not been saved.</div>
</div>
</div>
</div>
Use the bling-bling http://api.prototypejs.org/language/dollardollar/
$$('#popup_lightbox #popup_window') (also, you are not using ids properly, like desau and fantactuka said)
First up, you're using ID attributes incorrectly. According to the W3C specification, ID attributes are supposed to be unique across the document.
That aside, the prototype selection syntax is slightly different from jQuery:
$("popup-lightbox").select("#popupwindow")[0];
Actually since id should be uniq at the page I'm not sure that it makes sense to use complex selector. Why not just $('popupwindow')?
Related
How to get nested DOM.
I want to get the nested DOM by Jquery.
For example.
<div id="red">
<div id="member">A</div>
</div>
<div id="blue">
<div id="member">B</div>
</div>
<div id="yellow">
<div id="member">C</div>
</div>
Is it possible to get the each memver id like, yellow.member
I want to do like this.
$("#yellow.member").removeClass("myclass");
The way you wanted to access the child element of #yellow was real close to be correct.
$("#yellow .member").removeClass("myclass");
Notice the added space. The space means to look for another matching element in the descendant tree of the element matched by the previous selector.
Now it's your markup that is wrong. You just cannot use the same id more than once. The concept of id comes from long before the computer age... An "identification" is unique per definition!
Here is how your markup should look like... in a working example where the interval is just for fun:
$(document).ready(function(){
setInterval(function(){
$("#yellow .member").toggleClass("myclass");
},1000);
});
.myclass{
background-color:yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="red">
<div class="member">A</div>
</div>
<div id="blue">
<div class="member">B</div>
</div>
<div id="yellow">
<div class="member">C</div>
</div>
You can use nested selectors with jQuery:
$('#yellow #member').removeClass('myclass');
Removes .myclass from the #member element inside #yellow.
Also, your HTML isn't valid. You can use an ID only once per document, so change all <div id="member"> ... </div> to <div class="member"> ... </div>. Then the selector passed to jQuery changes to
$('#yellow .member')
What you're after is the .find() method.
$("#yellow").find('#member').removeClass("myclass");
Or children()
$("#yellow").children('#member').removeClass("myclass");
or
$('#yellow>#member'),removeClass("myClass");
EDIT: Also don't have duplicate id's. Use class attribute instead.
This should be pretty simple but I can't make it work. I need the height of an item that is inside the last item with a class.
HTML like so:
<div class="tag" >
<div class="left"></div>
<div class="right"></div>
</div>
<div class="tag">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="tag">
<div class="left" id="I need this height !"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
JavaScript poor attempt:
lastLeftHeight = $('.tag').last().$('.left').height();
I know that doesn't work. It's just to show what I'm trying to get .tag items can vary so I can't target a number or an ID.
try this ..
lastLeftHeight=$('.tag:last > .left').height();
you almost had it, but instead of using jquery methods, it can be accomplished with the proper query selector
$(.tag:last .left).height()
this will grab the last .tag element and find every child element with the class .left and return their heights
heres a fiddle demonstrating the selector in action:
http://jsfiddle.net/6e0s4jzj/
I would try some combination of using children(), filter(), and last() to get the height of a particular child div.
http://www.w3schools.com/jquery/jquery_traversing_filtering.asp
This explains a little more about traversing up and down the DOM using jQuery, and with examples that I would think would help.
I can't figure out how to reach a nested div from the outer most element. Here is the html:
<li id="slide1">
<div id="video-container">
<div id=video-holder><div id="thumbnail"></div></div>
<div id=video-title></div>
<div id=video-desc></div>
</div>
</li>
I need jquery that will reach the id thumbnail from the starting id of the slide1
Use find to get the descendant.
$("#slide1").find("#thumbnail")
Basically since it is id you can just do: as id is supposed to be unique no matter where it appears.
$("#thumbnail");
For your scenario you want to use startswith selector to select the dynamic id starts with video_fake and in the 5th
slide.
$('#slide5fake').find('[id^=video_fake]').attr('id', 'newId')
$("#slide1").find("#thumbnail")
try this
<li id="slide1">
<div id="video-container">
<div id=video-holder><div class="thumbnail"></div></div>
<div id=video-title></div>
<div id=video-desc></div>
<div id="video-container">
<div id=video-holder><div class="thumbnail"></div></div>
<div id=video-title></div>
<div id=video-desc></div>
</div>
</li>
<script type="text/javascript">
$('#slide1').find('.thumbnail').each(function(){ });//you can get here two thumbnail
</script>
$("#thumbnail")
will find the thumbnail directly, but I suspect the id for your thumbnail will be repeated down the page, so you really need to be searchind for a class.
$("#slide1.thumbnail")
will do that if you change this line
<div id=video-holder><div id="thumbnail"></div></div>
to this
<div id=video-holder><div class="thumbnail"></div></div>
In case there are more "thumbnails" on your page, it would be better to give it a class. Ids should be unique.
In your given case, it would be sufficient to get it by ID
document.getElementById("#thumbnail")
If you gave it a class
document.querySelector("#slide1 .thumbnail")
would get you the element.
In jQuery the equivalent would be:
$("#slide1").find(".thumbnail");
There are many ways you can do this...
Single selector:
$('#slide1 #thumbnail');
If you already have the slide element:
var slide = document.getElementById("slide1");
// and then:
$('#thumbnail', slide);
Doing a .find() on the #slide1 element
$("slide1").find("#thumbnail");
But since you're using an ID it doesn't make sense to do anything else but finding that single ID, since you shouldn't have more than one element on a page with the same ID
$("#thumbnail");
There are probably more ways.. and what the best method is depends a lot on what you're doing and what the context is...
Good luck
My HTML structure is like this:
<div id="parent">
<div id="1">Some content</div>
<div id="2">Some content</div>
</div>
I want to move the element id="2" to place before id="1" so its will be like this:
<div id="parent">
<div id="2">Some content</div>
<div id="1">Some content</div>
</div>
How do I do something like that in jQuery?
You can use .insertBefore(), like this:
$("#2").insertBefore("#1");
Or, .prependTo(), like this:
$("#2").prependTo("#parent");
...or the reverse using #1 and .insertAfter() and .appendTo()...or several other ways actually, it just depends what you're actually after, the above 2 methods should be about the shortest possible though, given 2 IDs.
I'm assuming this is just an example, remember to use IDs that don't start with a number in an actual HTML4 page, they're invalid and cause several issues.
Simply do:
$('#1').before($('#2'));
Ever thought about using jQuery UI Sortable ?
<div id="first">
<div id="here">...</div>
</div>
<div id="second">
<div id="here">...</div>
</div>
jquery:
$("#second #here").click(function(){});
how to write jquery to detect when I click the second ?
This is the wrong question to be asking, because you are not supposed to have duplicate IDs in a document. An ID is like the social security number of an element. You can't give multiple elements the same one, because then when you tell Javascript to find an element by ID it will be terribly confused by the fact there's more than one and give you unexpected results. The reason ID lookups are as fast as they are is because the browser can have a hash table of ID->element - violating that understanding is a bad practice, to say the least.
When you have several elements that are all of the same "type", the proper practice is to class them:
<div id="first">
<div class="here">...</div>
</div>
<div id="second">
<div class="here">...</div>
</div>
So then you can do:
$('#first').find('div.here');
Or:
$('div.here', '#second');
Or:
$('#first div.here');
Which would all return what you expect them to return.
This is what you are looking for, but like Paolo said, you cannot have duplicate ID's. If you're styling things, use a class.