From following html
<tbody>
<tr id="article0">
<td id="CheckboxDiv0">
<div class="checkbox">
<label>
<input type="checkbox" id="CheckboxArticle0" value="helo">
</label>
</div>
</td>
</tr>
</tbody>
I am trying to get the parent id
$ParentId = $("#checkboxArticle0").parentNode.parentNode.parentNode.parentNode.id;
The code is not working fine. Can someone suggest me how to grab the id of the parent div which is "article0"?
You can use .closest()
var parentId = $("#CheckboxArticle0").closest("tr").attr("id");
Description:
The closest() method returns the first ancestor of the selected element.
Refer: This for more.
Try like this
$("#checkboxArticle0").closest("tr").attr("id")
$("#checkboxArticle0").parents('tr').attr("id")
2 points to be note:
1) Use document.getElementById in javascript to access any element using its id,
2) You have mentioned wrong id , Use "CheckboxArticle0" instead of "checkboxArticle0" (C need to be capital letter)
Correct script is:
var ParentId=document.getElementById("CheckboxArticle0").parentNode.parentNode.parentNode.parentNode.id;
alert(ParentId)
Related
I have this HTML structure :
<div class="col-sm-3" id="checkbox-cod">
<label class="non-escrow">
<input type="checkbox" name="payment_method[COD]" value="1"> COD
</label>
</div>
and I have this javascript (not jQuery) to select and check the input checkbox :
var kkCod = document.getElementById('checkbox-cod');
kkCod.find('input').checked = true;
but the selector is wrong. it can't select the input and give checked value. how to use find() properly in this case? thank you.
First of all, you can use document.querySelector('#checkbox-cod') instead of getElementById .
As an alternative to jQuery find(), you can chain a call to querySelector like :
document.querySelector('#checkbox-cod').querySelector('input').setAttribute('checked',true)
I don't believe find() is a native method of Element but rather a jQuery method.
You can however use querySelector() like this:
kkCod.querySelector('input').checked = true;
Using jQuery I want to add some HTML to a specific <td> whose attribute matches the value I have.
For example I have a value '2015-02-01', I want to find/search the <td> which had the attribute 'data-date="2015-02-01"' and append HTML to the matched value, which in this example is <td>1</td>
<div class="fc-content-skeleton">
<table>
<thead>
<tr>
<td data-date="2015-02-01" class="fc-day-number">1</td>
<td data-date="2015-02-02" class="fc-day-number">2</td>
<td data-date="2015-02-03" class="fc-day-number">3</td>
<td data-date="2015-02-04" class="fc-day-number">4</td>
<td data-date="2015-02-05" class="fc-day-number">5</td>
<td data-date="2015-02-06" class="fc-day-number">6</td>
<td data-date="2015-02-07" class="fc-day-number">7</td>
</tr>
</thead>
</table>
</div>
I dont have any sample code as I am stuck really on how to approach this.
// This only gives me the value of the attribute
$this.parent().find('.fc-day-number').attr('data-date');
Just use attribute selector whose syntax is [attributeName[=attributeValue]]
var value = "2015-02-01";
$('[data-date="' + value + '"]').append('html here');
Note, that you can apply the above selector in find, closest and other such jQuery methods that accept a CSS selector.
Use jQuery Attribute Equals selector
then use jQuery html() to add content
or use jQuery append() to append content
here is the html() fiddle
I think is that you want :
var date = "2015-02-03";
$("td[data-date='" + date + "']").append(date);
Solution on this url : http://jsfiddle.net/g09jvfxy/1/
I am struggling to find an answer for this, I want a way to talk about an element, but because of the system I am adding to I do can not reference by its Id as it is dynamic. I can specify the class name of its containing div though... In essence what I am looking for is something along the lines of:
var disAb=document.getElementBySomething("div.ContainerDiv select")
When I mention the term 'path' I mean how I would reference it in CSS (see code reference).
Thank you guys!
You want document.querySelector or document.querySelectorAll, then just reference it by its hierarchy path:
Sample HTML
<div class="ContainerDiv">
<table>
<tr>
<td>
<div>
<select>
<option>Some options</option>
</select>
</div>
</td>
</tr>
</table>
</div>
JS
Get single element
var select=document.querySelector("div.ContainerDiv table tr td div select");
select.id = "someid";
For more than one element
var selects=document.querySelectorAll("div.ContainerDiv select");
selects[0].id = "someid";
Of course you do not need each part of the hiearchy, for instance you could just use: div.ContainerDiv select or div.ContainerDiv table select etc.
need some help! am trying to get the value of the below input id "j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id63" and have tried jquery and javascript such as: document.getElementById("j_id0:j_id2:j_id4:j_id54:0:j_id59:3:j_id63") but keep getting a null result. ID can't be changed either, any help appreciated
<td class="sf42_cell_bottom_light"><span id="j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id61"><input id="j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id63" maxlength="200" name="j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id63" size="20" type="text" value="717474417"></span></td>
Use this:
$("[id='j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id61']")
By the way, since you are apperently using JSF, this is a good practice to set id to each component to avoid such horrible ids (who can changes if you add/remove components).
See more information in this thread:
Handling colon in element ID with jQuery
Do you have any control of the element? Can you add a class to it?
var val= document.getElementsByClassName("TheClassName");
Or you can get the TD with class sf42_cell_bottom_light (if it is unique) then get its INPUT elements by:
var theTd= document.getElementsByClassName("sf42_cell_bottom_light");
var val = theTD.getElementsByTagName("INPUT");
I need to see more of the HTML to give you an better answer.
You may need to escape colon in your id .So
try this
function RemoveInvalidCharacter(myid) {
return '#' + myid.replace(/(:|\.|\[|\])/g, "\\$1");
}
And call like this
$(RemoveInvalidCharacter('j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id61'));
Have a look at How do I select an element by an ID that has characters used in CSS notation
I have tested this code:
<td class="sf42_cell_bottom_light">
<span id="j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id61">
<input id="j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id63" maxlength="200" name="j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id63" size="20" type="text" value="717474417">
</span>
</td>
<script type="text/javascript">
document.write(document.getElementById("j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id63").value);
</script>
in FF, IE, Chrome (the latest versions)... and seems to work ok... ar you sure it is about this id?
Replace:
document.getElementById("j_id0:j_id2:j_id4:j_id54:0:j_id59:3:j_id63")
with
document.getElementById("j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id63")
The id is different.
http://jsfiddle.net/wNePW/
Using JQuery, how can I select the closest element of a certain type that is in the same node as the element I am using?
For example:
From the $('#errorDate') and want to select the closest span?
<td width="318" class="body">
<input name="errorDate" type="text" id="errorDate" class="txtInputs" />
<span class="errorDes"id="errorDes"></span>
</td>
for more details, if you're interested take a look at https://github.com/gilmoreorless/jquery-nearest
You could simply do
$('#errorDate').next('span')
Or Just
$('#errorDate').next()
[updated with fiddle]
if you want to select the first next sibling go for :
$('#errorDate').nextAll('span:first')
and for first previous :
$('#errorDate').prevAll('span:first')
check out the fiddle
There are many options for selecting this,
var firstspan=$('#errorDate').closest('td').find('span:first-of-type');
or
var firstspan=$('#errorDate').closest('td').find('span.errorDes');
or
var firstspan=$('#errorDate').next('span.errorDes');
or
var firstspan=$('#errorDate').closest('td').find('span:first');