Develop Reference

jquery - get the id of the closest element?

This is my code which is used to edit an input when clicked on it and then save in the db.
$(document).ready(function() {
$('.editable').on('click', function() {
var that = $(this);
if (that.find('input').length > 0) {
return;
}
var currentText = that.text();
var $input = $('<input>').val(currentText);
$(this).append($input);
// Handle outside click
$(document).click(function(event) {
if(!$(event.target).closest('.editable').length) {
if ($input.val()) {
that.text($input.val());
var div_id = $(this).closest('#commentbox').attr('id');
div_id = div_id.replace('comment-', '');
alert(div_id);
$.post( "updateComment.php", {id: div_id,message: $input.val()})
}
that.find('input').remove();
}
});
});
});
Var div_id is not retrieving it at all.
And I want to retrieve only the number from the id from this however it does not work. I've been trying several solutions and this last one isn't working either
<div id="comments">
<div class="commentbox" id="comment-90">...</div>
<div class="commentbox" id="comment-91">...</div>
</div>

This part of code is basically a problem:
var div_id = $(this).closest('#commentbox').attr('id');
Firstly, you are trying to get closest element from document as this points to document in that part of your code (you meant probably event.target instead).
Secondly, you are trying to find the closest element with id == 'commentbox', as this is what #<selector> means. You should use some other attribute for that purpose - probably best would be some class selector and then use the .attr('id') on it.

Select Child ByClassName Javascript

I have many divs like the following rendering on the same page:
<div class="contentUser">
<div class="innerContent">
Some data
</div>
<div class="contentButtonWrap">
Some buttons
</div>
</div>
I need to trigger a style change on "contentButtonWrap" when "contentUser is clicked".
I don't know how I can select a child element of a certain class name. Notice that the number of elements that can be rendered within "contentUser" changes from div(contentUser) to div. But there is all ways only one "contentButtonWrap" element within "ContentUser".
This is what I have:
function avoidHover() {
var userDivs = document.getElementsByClassName('contentUser');
[].forEach.call(userDivs, function(e){
e.click = function(){
var target = e.getElementsByClassName('contentButtonWrap');
target[0].style.backgroundColor='green';
};
});
};

"onclick" instead of "click". Sorry about that...
function avoidHover() {
var userDivs = document.getElementsByClassName('contentUser');
[].forEach.call(userDivs, function(e){
e.onclick = function(){
var target = e.getElementsByClassName('contentButtonWrap');
target[0].style.backgroundColor='green';
};
});
};

Here is my take at it : http://jsfiddle.net/cdL51w2g/
function avoidHover() {
var userDivs = document.getElementsByClassName('contentUser');
for(var i=0; i<userDivs.length; i++){
userDivs[i].onclick = function(){
var target = this.getElementsByClassName('contentButtonWrap');
target[0].style.backgroundColor='green';
};
}
};
I changed the way to access the children in the parent divand used the function onclick instead of click in the question.

get parent divtext with jQuery

In the following markup, I want to select the text inside the .title but exclude the text which is inside the .button.
<span class="title">
Title Text
<span class="button">Button</span>
</span>
I am trying following code but it selects the .button text also. How can I exclude that without changing the HTML.
$('.title').on('click', '.button', function() {
var item = $(this).parent();
var title = item.text();
alert(title);
});

You need to retrieve value of the textNode. Try this:
$('.title').on('click', '.button', function() {
var $item = $(this).parent();
var title = $item.contents().get(0).nodeValue;
alert(title);
});
Working fiddle

Try this,
$('.title').on('click', '.button', function() {
var $item = $(this).parent();
var title = $item.contents().get(0).nodeValue;
alert(title);
});
Working Demo

Yet another way, using the built-in previousSibling property (which includes text nodes as well) [just for information sharing].
$('.title').on('click', '.button', function() {
alert(this.previousSibling.nodeValue);
// trim the above as it can contain newlines, spaces, etc. as in the source
});

You can clone the element, and remove the children. Then get the text of the cloned element.
$('.title').on('click', '.button', function() {
var title = $(this).parent().clone().children().remove().end().text();
alert(title);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span class="title">
Title Text
<span class="button">Button</span>
</span>

you can replace the text retrived from the button with '' in the parents text
http://jsfiddle.net/94u3rf6b/
$('.title').on('click', '.button', function() {
var item = $(this).parent();
var title = item.text().replace($(this).text(),'');
alert(title);
});

grabbing div id by click

I am using $('.startb').click(function() {
var myId = $(this).attr("id");
}); to capture the id "startb1" what do I need to add to also capture the id "test1" by the class "flashObj" by using the fact they are all in the same div container "audioContainer"
<div class="audioContainer">
<div class="audioTitle">hi</div>
<div class="playerHolder">
<div class="startb" id="startb1" rel="Audio/004_IAM_God_is_Love.mp3"><img src="dbs/images/start.png" width="40" height="40" /></div>
<div class="flashObj" id="test1"></div>
<div class="mp3Logo"><img src="dbs/images/mp3_off.gif"/></div>
</div>
</div>

You could search for siblings of the div having the class flashObj:
$('.startb').click(function() {
var myId = $(this).attr("id");
var flashObjID = $(this).siblings('.flashObj').attr('id');
});

var myId = this.id;
var otherId = this.parentNode.querySelector(".flashObj").id;
This method of getting the "startb1" id is approximately 150 times more efficient than yours, due to the amount of steps jQuery has to go through just to create the $(this) object, by the way.
Also, querySelector is supported in IE8 whereas getElementsByClassName isn't.
If IE7 and below is required, and the structure is reliable (ie. it will always be the fourth child div you need), use: var otherId = this.parentNode.children[3].id;.

Use .on() instead of .click() if you are using latest jQuery release:
$(".audioContainer").on("click", ".startb", function(e){
var _this = $(this);
var id = _this.attr("id");
var oId = _this.closest(".audioContainer").find(".flashObj").attr("id");
}
Now you can also map multiple events, keep events for later on and even pass data to the event.data object and etc.
Read more at: jQuery .on()

Assuming you want to use the same "click" event, the following should do the trick:
$('.startb').click(function() {
var myId = $(this).attr("id");
var flashID = $(this).parent().find(".flashObj").attr("id");
});

How to reference an id with brackets in jQuery

I'm painfully new to jQuery and I need to grab the value on change of a text input box with an id of id[2][t] and display that text in a div to be styled later on (also styled with jQuery).
This is the input box code:
<input id="id[2][t]" name="id[2][t]" maxlength="20" type="text">
This is the div I am trying to display it in:
<div id="textpreview"></div>
This is what I have tried, among other variation with no success:
$(document).ready(function() {
$('#id\\[2\\]\\[t\\]').change(function() {
var txtval = $('#id\\[2\\]\\[t\\]').text();
$("#textpreview").val(txtval);
});
});
I know the brackets are a problem but they need to remain for other reasons.
Any ideas?

$( document.getElementById( "id[2][t]" ) ).change( function(){
$( "#textpreview" ).text( this.value );
} );

You might consider revising your IDs (though I'm guessing they might be auto-generated). According to this question your IDs are invalid against the spec

Use the attribute selector instead:
var sel = $("[id='id[2][t]']");
sel.change(function() {
$("#textpreview").val(sel.text());
});

Plain Old JavaScript:
var elem = document.getElementById('id[2][t]');
elem.onchange = function()
{
var elem = document.getElementById('textpreview');
elem.removeChild(elem.firstChild)
elem.appendChild(document.createTextNode(this.value));
}
Ahhh... now doesn't that feel better?

You have val and text backwards. Swap them:
$('#id\\[2\\]\\[t\\]').change(function() {
var txtval = $('#id\\[2\\]\\[t\\]').val();
$("#textpreview").text(txtval);
});
val is used to get the value of the textbox. text to set the text within the div.
You can further simplify the code by using this instead of re-querying the element.
$('#id\\[2\\]\\[t\\]').change(function() {
var txtval = this.value;
$("#textpreview").text(txtval);
});

You can try using the attribute selector instead of the id selector.
$('[id="id[2][t]"]')