Develop Reference

Jquery: Getting the id of an html element: why one solution works and the other don't

I am referencing one element on an index page hidden initially and then showed with jquery on an index.html page. Can't explain why the first ones doesn't work, even if it should, but the last one does. I am getting the id of a pressed button "id='edit1'...2...3..etc" Thank you!
//why this doesn't work and the next one does???
/*$('.edit-btn').click(function(){
var id = $(this).attr('id');
console.log("btn1:", id);
});
$('.edit-btn').on('click', function(){
var id = $(this).attr('id');
console.log("btn1:", id);
});
*/
var id;
$("body").on("click",".edit-btn",function(){
id = (this.id).replace("edit","");
UPDATE:
The containers are hidden and shown using this function:
function hideWindowsAndShowOneWindow(sWindowId) {
$('.wdw').hide(); //fadeout 500
$('#' + sWindowId).show(); // fade in 500
}
So the div container, I am trying to reference by id was hidden after the page was loaded or maybe before the page is loaded. My guess is after the page is loaded...
The HTML:
<div class="wdw" id="wdw-events">
<h4>Events text</h4></br>
<div id="content"></div>
<h4>Edit Events</h4></br>
<div>
</div>
It is added/injected after the page was loaded with this js script, but still what has the last method special, just referencing through the document down to the id attribute of the button:
finalEventsLS.forEach(function (item) {
var date = item.date.day + "/" +item.date.month + "/" + item.date.year;
$('#content').append("<ul><li>" +
"Event nr.: " + item.id + " " +
"Name: " + item.name + " " +
"Topic: "+ item.topic + " " +
"Speaker: "+ item.speaker + " " +
"Date: " + date + " " +
"</li><button class='edit-btn' id='edit" + item.id + "'>Edit</button>
</ul>");
})

It's hard to tell, since you've only shared your jQuery. Update with your HTML please.
If you are referencing an element which was added to the DOM after the initial page load, .click will not work, because it only looks for elements initially loaded into the DOM. Instead, you would use the .on method, which looks for elements added to the DOM both before and after initial load.
UPDATE:
I should have looked closer. The second snippet of code that didn't work, but used the .on method, most likely didn't work because you are still trying to access the .edit-btn element, which at this point I'm assuming was added after page load. The code snippet that does work, is accessing the body element first. I will try to find and update with a better explanation, but the .on method still needs to find a element that existed in the DOM initially. From there, it can climb down the tree to find .edit-btn element.

How to change Jquery selector based on an param passed through a function

I have a function:
function factCheck(index) {
if (arrayOfSites[index].indexOf("pdf") > -1) {
$('#20').attr('style', 'color: red');
$('#' + index).attr('style', 'color: red');
console.log('index: ' + index);
console.log($("#" + index).text());
}
}
So my question is. The text color of the element changes color when I use $('#20') but when I use, $('#' + index) it doesn't work.
Funny thing is, I with console.log.. it logs the text of the element but I can't effect the css of it.
Why is this happening?
// after a three hour meeting.. I came back with some really great answers!! Thank you!!
edit:
the code below shows how I'm snagging all the links on the page and add the id equal to the index of that item. So that's why I'm trying to grab that link, and effect it in some way. I appreciate all you guys.. I think I'm going to take the string and add a letter to it as they come in through the function and then manipulate the anchor from that point. I just wonder if there's a more efficient way of doing this.
$(".lpage a").each(function (index) {
// console.log(index + ": " + $(this).text());
str = $(this).attr('href');
arrayOfSites.push(str);
str = arrayOfSites[index];
title = $(this).attr('title');
parseURL(str);
$('.colContent2').append(cellOpen + '<a onclick="whichFunction(' + index + ');" id= "' + index + '"style="cursor:pointer;" class="injectedLinkCol2" >' + str + '</a>' + cellClose).prop("id", index);
});

Maybe it has something to do with the name of your id attribute. Take a look at this answer.

Try to use the toString() function:
function factCheck(index) {
if (arrayOfSites[index].indexOf("pdf") > -1) {
$('#20').attr('style', 'color: red');
$('#' + index.toString()).attr('style', 'color: red');
console.log('index: ' + index);
console.log($( "#" + index.toString() ).text());
}
}

An id name or class name must begin with a name must begin with an underscore (_), a hyphen (-), or a letter(a–z).
So something like
'#d20'
would work.
See this: Valid CSS Selectors.

I couldn't reproduce the exact problem. I made a pen (link) and tried what you asked but it works well. So it must be some error in the remaining code.
on a related note
In CSS id's are not allowed to start with a number(classes are allowed). So writing something like
#20{
color: red;
}
won't work, but the rule only applies to css. JQuery will still work, which means your only option's are to write inline styles or use JQuery's .attr or .css, but jQuery.attr() will reset all your inline styles. you are left with using .css(). So, it's better to not start your id's with numbers.
try using .css instead of .attr and see if it works.

$('.exampleClass:eq(' + index + ')').css("color", "yellow");
for some reason works
$('.exampleClas').eq(index).css("color", "yellow");
does not work.

jQuery Selector equivalent of javascript

I am trying to get the jquery equvaliant of this javascript
var id = $(this).parent().parent().parent().attr("id");
document.getElementById(id).getElementsByClassName("addcomment")[0].style.display = 'block';
but its not working
$('#+id+' '.addcomment').css('display','block');
Any suggestions ?

$('#' + id + '.addcomment').css('display','block');
as a sidenote in the page you should have only one element with that id, so
$('#' + id ).css('display','block');
should works too (of course only if classname it's not necessary to target it, since this is a different selector)

$('.addcomment', '#' + id).css('display','block');
or just simple
$('#' + id).css('display','block');

I think you need to get the child elements based on their class. So try this.
$('#' + id ).find('.addcomment').show();

jQuery Validation on check box click disable TextBox?

Hi I am trying to get this JavaScript work for me.
Can any one help me with this.
When user clicks the Check box the next text box should disable,
if unchecked then enable.
selectors are working fine when I debug scrip in IE9 developer tool.
function is running fine as needed.
<input id="RefillNeeded10" name="RefillasNeeded" type="checkbox" value="true">
<input type="text" size="5" id="RefillTB10," name="Refills">
$('input[type="checkbox"][name^="RefillasNeeded"]').click(function () {
var num = $(this).attr('id').replace("RefillNeeded", "");
if ($('input[type="checkbox"][id="RefillNeeded' + num + '"]').attr("checked")) {
$('input[type="text"][id="RefillTB' + num + '"]').attr("disabled", true);
}
else {
$('input[type="text"][id="RefillTB' + num + '"]').attr("disabled", false);
}
});
but $('input[type="text"][id="RefillTB' + num + '"]').attr("disabled", true);
this is not creating the attribute disable.
I have this listed here for convenience.

Your selector isn't matching any elements. It looks like you have a typo in your HTML - there is a trailing , in the id of the text box. Remove the comma from your id attribute, and it should work. http://jsfiddle.net/gilly3/KJVCa/13/
By the way, you don't need that big long selector to get the checkbox and test if it is checked. You already have a reference to it as this. And you can just check its checked property:
if (this.checked)
While we're at it, why not really simplify things. You don't need to parse the id, just get the next element (assuming your textbox always follows your checkbox). You don't need an if, just use the boolean directly. Your code can be shrunk down to just this:
$("input[type=checkbox][name^=RefillasNeeded]").click(function () {
$(this).next().attr("disabled", this.checked);
});
See it here: http://jsfiddle.net/gilly3/KJVCa/15/

Also for the javascript I had to change
$('input[type="checkbox"][id="RefillNeeded' + num + '"]').attr("checked")
To
$('input[type="checkbox"][id="RefillNeeded' + num + '"]').is(":checked")
to get it to work.

Change
$('input[type="text"][id="RefillTB' + num + '"]').attr("disabled", "disabled");
and
$('input[type="text"][id="RefillTB' + num + '"]').attr("disabled", "");
to
$('input[type="text"]["#RefillTB' + num + '"]').attr("disabled", "disabled");
and
$('input[type="text"]["#RefillTB' + num + '"]').removeAttr("disabled");
respectively.

Can I shorten a string of childNodes[0]?

I have this line of code. It works just fine, but I'm wondering if there's a smarter (read: shorter) way of doing it?
svg.getElementById($(this).attr('id')).childNodes[0].childNodes[0].nodeValue = $(this).val();
I'm using jQuery as well, so any jQuery methods are fine :)
The markup being reached is
<text id=n>
<tspan>text to reach</tspan>
</text>
It would be ideal, however, if I could reach the text even if the tags were removed.

This should let you change the text:
$("#" + $(this).attr("id") + " tspan").text($(this).val());

This might be a kludge, but it'll substitute the end node value of a text element whether it has a tspan element or not. This example acts on an input field with a class of 'replace'.
$('.replace').keyup(function() {
if ($("#" + $(this).attr("id")).has("tspan").length) {
$("#" + $(this).attr("id") + " tspan").text($(this).val());
} else {
$("#" + $(this).attr("id")).text($(this).val());
}
}