I have an element div which is created by js, i want to get it class.
I try to getElementsByClassName('lt-label')(it works), than i want to check if lt-label has class lt-online and if it true the another block on the page is block.
My code:
$(document).ready(function() {
if (document.getElementsByClassName) {
var redTags = document.getElementsByClassName('lt-label');
if (redTags.is(".lt-online")) {
$("#l-b-wrapper").css({
'display': 'block'
});
};
};
});
But it doesn't work. Where i have mistake?
I give a link only because the html code is big and i can't show my problem full .Site http://www.zemelushka.ru/test/
lt-label - is a right page widget button
l-b-wrapper - left page widget button
You are mixing native and jQuery, Use jQuery object since document.getElementsByClassName will return you an array-like object and they don't have jQuery methods
$(document).ready(function() {
if ($('.lt-label').is(".lt-online")) {
$("#l-b-wrapper").css({
'display': 'block'
});
};
});
You have a really odd mix of native JS and jQuery which is causing the problem.
getElementsByClassName returns an array of DOMElements which do not have the is() method. If you use jQuery to select your elements you can both avoid the problem and shorten your code:
$(function() {
if ($('.lt-label').hasClass('.lt-online')) {
$("#l-b-wrapper").show();
}
});
Note that if there are multiple .lt-label elements found you may need to loop over them, depending on the behaviour you require.
To work with jquery methods you need jQuery Object otherwise you'll get error: method is undefined. So, you may also wrap javascript object with jquery like this:
if ($(redTags[0]).is(".lt-online")) {
Where, redTags is wrapped by jQuery ie. $() and we use [0] for first element as getElementsByClassName result array-like object.
But I would choose simply jQuery object while I work with jquery for simplicity:
$('.lt-label') instead of document.getElementsByClassName('lt-label');
As you should know jQuery has it's own dictionary of methods and it works only with jQuery objects. And you are trying to bind a jQuery method .is() to a dom object which causes in error because .is() is available only for jq objects.
So this would do it (creating a jq wrapper):
$(redTags).is(".lt-online")
and you can shorten it like:
$(document).ready(function() {
var redTags = $('.lt-label');
$("#l-b-wrapper").css({
'display': function(){
return redTags.is(".lt-online") ? "block" : "none";
}
});
});
If you just want to show/hide the element then you can use .toggle(boolean) method:
$(document).ready(function() {
var redTags = $('.lt-label');
$("#l-b-wrapper").toggle(redTags.is(".lt-online"));
});
Related
I have some elements like TextBox, Select. I have a script to hide some elements. For this I use the code below, but it doesn't work:
$(document).on('change', '#TypeId', function (e) {
var selected = $(this).val();
if (selected == 1) {
$($('#Issue').parent(), $('#ServiceRequestId').parent()).hide();
console.log('test');
}
});
It just hides the first selector. When I change the selector like below it works fine:
$( $('#ServiceRequestId').parent()).hide();
The second argument is the context in jQuery which would help to filter element within that context.
I think you want to combine both objects, for that use add() method to combine two independent jQuery objects.
$('#Issue').parent().add($('#ServiceRequestId').parent()).hide();
Or provide both jQuery objects within an array.
$([$('#Issue').parent(), $('#ServiceRequestId').parent()]).hide()
This question already has answers here:
Chained method calls doesn't work on original nor cloned element, why?
(2 answers)
Closed 6 years ago.
I have the following HTML:
<input type="text" id="condition_value_1" style="display: none" />
<button id="showme">Make Select2</button>
<button id="clickme">Make Input</button>
Then take a look to the following jQuery:
$(function() {
var cond1 = $('#condition_value_1');
var cloned_cond1 = cond1.clone();
var cond1_select = '<select name="condition_value_1" id="condition_value_1" multiple="multiple"><option></option><option value="1">Opt1</option><option value="2">Opt2</option></select>';
$('#showme').click(function() {
cond1.removeAttr('style').replaceWith(cond1_select).select2({
placeholder: 'Select choice'
});
});
$('#clickme').click(function() {
if ($('#condition_value_1').hasClass('select2-hidden-accessible')) {
$("#condition_value_1").select2('destroy');
}
$('#condition_value_1').replaceWith(cloned_cond1).removeAttr('style');
});
});
You can try the code above here.
Now as soon as you click on #showme you should remove the attr style, replace the original element with the given one and turn it into a Select2, the last part isn't working.
In the other side if you click on #clickme you should destroy the previous Select2 replace the #condition_value_1 with the cloned element and remove the attr style because the cloned has that attribute but this is not working either.
The idea is to switch between elements and turn on/off properties on demand.
Maybe I am missing something here but I am not sure what. Could any help me here?
Note: I've deleted my previous post to avoid confusions, apologies about that!
The problem is because replaceWith() returns the original jQuery object which now contains no elements as you replaced them.
In your logic structure this means you can't chain from those elements and need to start calls on the appended elements, like this:
var $cond1 = $('#condition_value_1');
var $cloned_cond1 = cond1.clone();
var cond1_select = '<select name="condition_value_1" id="condition_value_1" multiple="multiple"><option></option><option value="1">Opt1</option><option value="2">Opt2</option></select>';
$('#showme').click(function() {
$cond1.replaceWith(cond1_select);
$('#condition_value_1').select2({
placeholder: 'Select choice'
});
});
$('#clickme').click(function() {
if ($('#condition_value_1').hasClass('select2-hidden-accessible')) {
$("#condition_value_1").select2('destroy');
}
$('#condition_value_1').replaceWith($cloned_cond1);
$cloned_cond1.removeAttr('style');
});
If you do the following:
$("#div").replaceWith(".item2")
The object returned by the replaceWith method is the original set of objects. This because they might be replaced, but they still exists. Maybe not in the DOM but outside of it. Therefor you might want to do something else with it after replacement.
Therefor you need to make a seperate Javascript call where you select the right element and call the removeAttr and select2 function.
The .replaceWith() method, like most jQuery methods, returns the jQuery object so that other methods can be chained onto it. However, it must be noted that the original jQuery object is returned. This object refers to the element that has been removed from the DOM, not the new element that has replaced it.
http://api.jquery.com/replacewith/
I am trying to find all the elements with a specific background-image and change it to another one.
I tried doing it with this piexce of code:
jQuery('a').each( function() {
if ( jQuery(this).css('background-image') == 'url("someurl.png")' ) {
jQuery(this).css('background-image') == 'url("anotherurl.png")';
}
});
but it didn't work...any idea how can i do it??
since this is a really small page i would rather go threw all elements in the page...
there is a way to go threw all elements in page?
Change:
jQuery(this).css('background-image') == 'url("anotherurl.png")';
to:
jQuery(this).css('background-image','url("anotherurl.png")');
Setting a property with .css()
When setting values with jQuery's css(), you'd do
jQuery(this).css('background-image', 'url("anotherurl.png"))';
It's a function, not a property that can be set with =
You need to use the setter of css() to change the property. You can also use filter() and the instance of jQuery passed in to the document ready handler to keep the $ in use. Try this:
jQuery(function($) {
$('a').filter(function() {
return $(this).css('background-image') == 'url("someurl.png")';
}).css('background-image', 'url("anotherurl.png")');
});
I am trying to use
$(this).parentNode.attr('data-element')
which should return 0 - 5 in string but it just won't work. I am using it in a function like this
$('.someClass').each(function(){
$(this).html(SomeFunction('SomeString', $(this).parentNode.attr('data-element')));
});
All the elements with class 'someClass' have a parentNode
<li class="element" data-element: 1 (or any number from 0 to 5 (including))> </li>
and I have no idea where is the mistake. What am I doing wrong?
--David
You are mixing jQuery and plain javascript in the same line of code and that will not work. You can either use:
$(this).parent().attr('data-element'); // jQuery
or
this.parentNode.getAttribute("data-element"); // plain javascript
parentNode is not a property of a jQuery object, so you can't mix the two the way you were doing it. The jQuery method for getting the parent is .parent().
You should do
$(this).parent().attr('data-element')
because you can't call attr() on a non jQuery object
Try doing this instead:
$(this).parent().attr('data-element');
For more information on functions like .parent() see the Traversing section of the JQuery documentation:
http://api.jquery.com/category/traversing/
Using jquery it should be:
$(this).parent().attr('data-element');
Without using jquery this would be:
this.parentNode.getAttribute("data-element")
I prefer to use:
var item = $(this);
var parent = item.closest(".element"); //using the class for selection
//and then use parent.attr('data-element')
I am loading data dynamically by AJAX into a cluetip (http://plugins.learningjquery.com/cluetip/#).
I want to toggle the results from a link like so:
$(document).ready(function() {
$("#calendarLink").live("click",( function() {
$("#result").toggle();
}));
});
For some reason the above will not work. Can you suggest an alternative?
Couple of questions/points
Do you really need to use .live() You're using an ID selector, so there should only ever be one of these.
Also, you have an extra set of brakets. Probably not a problem, but you could remove them:
$(document).ready(function() {
$("#calendarLink").click( function() {
$("#result").toggle();
});
});
Perhaps the toggle() function isn't be used properly?
See here http://api.jquery.com/toggle/
I'm not sure if this is new functionality only for jQuery 1.4 but it appears the toggle function requires parameters.
The following code is correct (demo online - http://jsbin.com/ehate/edit):
$("#calendarLink").live("click", function(e){
$("#result").toggle();
});
You use $.live() only if #calendarLink will be added dynamically later. If it isn't, use a regular click:
$("#calendarLink").click(function(e){
$("#result").toggle();
});
If this is not working for you, be sure to check your #calendarLink and #result elements in your HTML. Make sure the ID values are correct. Mainly, be sure your casing is correct.
Two elements in the same page can't have the same id.
u used
$("#result").toggle();
'I want to toggle the results from a link ...'
So the result elements should have the same class , not id.
The code should be :
$(".result").toggle();
'#' changed into '.'