Is there something in jQuery to uniquely identify a DOM node, if the HTML markup does not provide an id, i.e. if $(NODE).attr("id") returns undefined?
Goal: exclude a specific node of a specific class.
jQuery(document).ready(function($){
$(".accordion-right-content").hide();
$(".article-image img").click(function() {
$(".accordion-right-content").each(function(i,v) {
// the following comparison does not work because of the missing ID
if ($(v).attr("id") !== $(this).parent().parent().children(".accordion-right-content").attr("id")) {
$(v).hide();
} else {
$(v).show();
}
});
});
Except the specific $(this).parent().parent().children(".accordion-right-content") to be hidden before shown again.
You should use not operator like this:
if (!$(NODE).attr("id")){
//do stuff here
}
And the following, you're having wrong:
if ($(v).attr("id") !== $(this).parent().parent().children(".accordion-right-content").attr("id")) {
Should be this:
if ($(this).attr("id") !== $(this).parent().parent().children(".accordion-right-content").attr("id")) {
Related
I have a view that loads select elements dynamically into the page on certain button clicks. Each of these selects have the same id value followed with an index value based on how many times the button is clicked. so the id would be like
id="my_id_" + numOfClicks;
I have also given all these selectors the same class value
class="selects"
What is the best way to have an event handler for when the selected option changes in any of the drop downs. right now I have the following:
$('.selects').change(function() {
if($('this option:selected').val() == 0) {
}
else {
}
});
So what I'm trying to do is first get the right select element using "this" then figure out which of the options are selected. Is there a better/more efficient way to do this?
As you say these get added at runtime, you'll want a delegated event handler. Within the handler, as the comments have pointed out, it's just $(this).val() to get the selected value of that select box. So:
$("selector for some container they're in").on("change", ".selects", function() {
if($(this).val() == 0) {
}
else {
}
});
For instance, if they're all inside an element with the class container, then:
$(".container").on("change", ".selects", function() {
if($(this).val() == 0) {
}
else {
}
});
If there's no other suitable container, you can just use $(document).on(..., but usually it's better to handle things a bit closer to where they are than that.
Side note: Values are always strings, but == will coerce, so "0" == 0 is true. Still, it's useful to remember that they're strings.
Assuming html input.selects:
$('body').on('change', '.selects', function() {
if($(this).val() == '0') {
}
else {
}
});
http://jsfiddle.net/r4pxx0yy/1/
No quote around this.
recently I wrote one few lines of js in order to check the DOM structure and add "in" class in case user clicked on link. Now I need to use has property but I dont know how its used. Here is code:
$(document).on('click', '.collapse-all > a', function () {
var $collapseList = $(this).closest('#main-content').find('.collapse-list'),
$container = $collapseList.find('.collapse').removeAttr('style'),
$collapsed = $collapseList.find('.mehr-pfeil');
if ($container.filter('.in').length > 0) {
$container.removeClass('in');
} else {
$container.addClass('in');
}
});
$(function () {
$('.collapse-all > a').click();
});
// here is my try to check the DOM and add another class on <a> element
$(function () {
$container.hasClass('in') {
if ($container.filter('.in').length > 0) {
$collapsed.addClass('mehr-pfeil-active');
} else {
$collapsed.removeClass('mehr-pfeil-active');
}
}
});
So right now everything worked but when I tried to check if js has gave in class to .collapse then my code breaks. Can anyone tell me where I've made mistake
hasClass() returns a bool so your function may check something like this
if($container.hasClass('in')) {
...
}
As noted by TheBlueAussie, your $container is also not in the scope of your ready function.
A quick fix would be to global the variable like so
var $container;
$(document).on('click', '.collapse-all > a', function () {
var $collapseList = $(this).closest('#main-content').find('.collapse-list'),
$collapsed = $collapseList.find('.mehr-pfeil');
$container = $collapseList.find('.collapse').removeAttr('style');
...
}
There are 2 problems in your code
1,$container is not in the scope of your class checking function.
2, The way you used hasClass method is wrong
It will return true or false. So you can check it inside an if condition.
var $collapseList = $(this).closest('#main-content').find('.collapse-list');
$container = $collapseList.find('.collapse');
if ($container.hasClass('in')) {
$collapsed.addClass('mehr-pfeil-active');
} else {
$collapsed.removeClass('mehr-pfeil-active');
}
take a look at
.hasClass() to check if element has a class.
you can use it in a if and than addClass
if($('.class').hasClass('className'))
{
$('.class').addClass('xy');
//or
$('.class').removeClass('className');
//and so on
//.class could be #id as well
}
You should move the hasClass statement to a condition start since this method returns a boolean (true/false) value:
// here is my try to check the DOM and add another class on <a> element
$(function () {
if ($container.hasClass('in')) {
if ($container.filter('.in').length > 0) {
$collapsed.addClass('mehr-pfeil-active');
} else {
$collapsed.removeClass('mehr-pfeil-active');
}
}
});
You should also declare the $container variable inside this function or move its initialization to be a global one.
try this
$container.hasClass('in');
or if you want to toggle class
$container.toggleClass('in')
I am trying to improve the following script a little:
$(document).click(function(event) {
$('.home.active').click();
$('.home').removeClass("active");
});
This works, but it works when I don't want it to work. For example, I have a textbox. If that textbox gets focus, the class should not be removed, but if anything else on the page is clicked, the class should be removed. So I tried the following, which does not work:
$(document).click(function(event) {
if( $('#txtHomeSearch').focus() ) {
// don't remove class
} else {
$('.home.active').click();
$('.home').removeClass("active");
}
});
This stops the class being remove altogether, no matter where I click, and the textbox always has focus.
You can use event.target to determine the id of the clicked element:
$(document).click(function(event) {
if (event.target.id === "txtHomeSearch") {
// Don't remove class.
} else {
$('.home.active').click();
$('.home').removeClass("active");
}
});
you can find the source of the event using the target property.
if ($(event.target).prop('id') == 'txtHomeSearch') {
//don't remove class
}
You can try. You might need to drop the # from #txtHomeSearch I can't remember off the top of my head.
$(document).click(function(event) {
if( $(this).attr('id') == '#txtHomeSearch') {
// don't remove class
} else {
$('.home.active').click();
$('.home').removeClass("active");
}
});
Use
$(document).click(function(event) {
if( event.target.id == 'txtHomeSearch' )
return;
$('.home.active').click();
$('.home').removeClass("active");
});
Whatever the $('.home.active').click(); does, might screw it up.
You can use the event.target property to cross-check the element.
The problem is your if( $('#txtHomeSearch').focus() ) ... that's not checking if it's in focus, its GIVING it focus.
to select a focused element you can use the jquery(1.6) :focus selector, use $(document.activeElement) for future reference
The esample is here: http://jsfiddle.net/SsPqS/
I have a div with class="record" I add a click function to every object with class"record". in the click function I have this:(simplified)
$(".record").click(function(e) {
if (!$(e.target).is(':button')) {
if ($.contains($(this).parents(".parentDiv"), $("#UserInformation"))) {
alert("true");
} else {
alert("false");
}
}
});
I keep getting the true alert, but i'm not sure why becaue #UserInformation is certinly not in the div with class "parrentDiv"
Am i using the contains function wrong?
Thanks!
$.contains() is intended to take DOM elements, like this:
if ($.contains($(this).closest(".parentDiv")[0], $("#UserInformation")[0])) {
You can test the updated demo here.
I think you should use the has() method
$(".record").click(function(e) {
if (!$(e.target).is(':button')) {
if ($(this).closest(".parentDiv").has("#UserInformation").length) {
alert("true");
}
else {
alert("false");
}
}
});
http://api.jquery.com/has-selector/
Description: Selects elements which contain at least one element that matches the specified selector.
I have the following code:
function showAccessRequests_click() {
var buttonValue = $("#showAccessRequests").val();
if (buttonValue == "Show") {
$(".hideAccessRequest").removeClass("hideAccessRequest");
$("#showAccessRequests").val("Hide");
}
else {
$(".hideAccessRequest").addClass("hideAccessRequest");
$("#showAccessRequests").val("Show");
}
}
This script removes a class fine but it does not want to add the class. Can you see any issues with this code?
When you add hideAccessRequest class to the element, you search for it by the existence of that class.. if you are adding it, that class won't already be applied and thus you won't match any elements.
$(".hideAccessRequest") doesn't exist. you need to use id, I guess. And you might want to look at toggleClass.
you'd need an identifier for the classes you want to toggle ex:"accessRequest"... try this.
function showAccessRequests_click() {
var buttonValue = $("#showAccessRequests").val();
if (buttonValue == "Show") {
$(".accessRequest").removeClass("hideAccessRequest");
$("#showAccessRequests").val("Hide");
}
else {
$(".accessRequest").addClass("hideAccessRequest");
$("#showAccessRequests").val("Show");
}
}
classes are space-delimited, so if you want them hidden by default...
<div class="accessRequest hideAccessRequest">...</div>