I have the attibute Id.
In console when I type in the following jquery command:
$('#LocationRadioButtons a')
I get the following output
[<a id="4" href="#">Test</a>, <a id="5" href="#">Test1</a>, <a id="6" href="#">test2</a>]
Which is an array
If I type in the following jquery command:
$('#LocationRadioButtons a').first();
It will return the first element in that array:
Test
How do I return an element based on it's Id, and return its innerHTML. For example id = 5 innerHTML is test1,
Cheers
You can get the html by using html()
You can use
$('#LocationRadioButtons #5').html();
Based off your markup you can actually simply use
$('#5').html();
PS: I'd refrain from having ids start with a number. HTML4 doesn't like this.
while Id is unique for this element you can directly use id to get html
$('#5').html();
Try this,
$('#LocationRadioButtons a[id$="5"]').text();
an id is unique so you can just use the id selector to select an element with a specific id like this:
$('#5').html();
Try this:
As you already have the elements id, just do
$('#5').html();
Will alert Test1
jquery each() loop is useful when you don't have a selector and you want to parse through each element to check for certain condition.
$('#LocationRadioButtons a').each(function(index, value){
var myattr = $(this).attr('id');
if(myattr=='5') {
alert( $(this).html() );
}
});
Related
I have an element that contains an input text, to get the input text I'm using the jQuery method find.
The input text has a class name like this page-id-x with the x is variable, so I want to select that number after the substring page-id, and this is what I tried :
var id = ui.item.find('input').attr('class').split(/\s+/).filter(function(s){
return s.includes('page-id-');
})[0].split('-')[2];
console.log(id);
I think this code is too complicated, but I couldn't figure out some other way to do it.
If someone knows a better way, I'll be thankful.
Thanks in advance.
I'm going to assume the x part of page-id-x, not the id part, is what varies (since that's what your code assumes).
Another way to do it is with a regular expression, but I'm not sure I'd call it simpler:
var id = ui.item
.find('input')
.attr('class')
.match(/(?:^|\s)page-id-([^- ]+)(?:\s|$)/)[1];
Example:
var ui = {
item: $("#item")
};
var id = ui.item
.find('input')
.attr("class")
.match(/(?:^|\s)page-id-([^- ]+)(?:\s|$)/)[1];
console.log(id);
<div id="item">
<input class="foo page-id-23 bar">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
The above makes the same assumptions your current code does, which are:
The first input in ui.item is the one you want
It will have the relevant class name
I assume those are okay, as your question is asking for an alternative, suggesting what you have is working.
As you're using jQuery, take a look at this: https://api.jquery.com/category/selectors/attribute-selectors/
For your case, you can use $('[class^="page-id-"'). These types of selectors (listed on the link above) actually work in CSS, too. (At least most should, if not all.)
To get the number after page-id-, my suggestion would be to store that number in some other HTML attribute, like data-pageID="1" or the like.
So you could have:
<div id="page-id-3" data-pageID="3">CONTENT</div>
Then, when you have the DOM element using $('[class^="page-id-"'), you can access that number with .attr('data-pageID').val().
If you can control the HTML markup, instead of using class names, you can use data attributes instead. For example, instead of:
<input class="page-id-1">
You can use:
<input data-page-id="1">
Then jQuery can find this element effortlessly:
$('[data-page-id]').attr('data-page-id')
You can find your element using the *= selector.
let elem = document.querySelector('[class*=page-id-]')
Once you have the element, you can parse the id out:
let [base, id] = elem.className.match(/page-id-(\d+)/)
console.log('page id: %s', id);
Function objective()
{
Document.getelementbyid("pre").innerhtml=""
}
And in the HTML for my li in nave, I declared the onclick function but it is not working.
Note:- I am clear about case sensitivity in js and using bootstrap3
for resposive.
Use document.getElementsByTagName instead. This will return an array of all the elements that have that tag name.
Due to it returning an array, you need to make sure you use [0] to find the first index in the array.
function objective(){
document.getElementsByTagName("pre")[0].innerHTML="";
}
objective();
<pre>This is some content that will not show in the snippet</pre>
<div>This content will though</div>
getelementbyid() expect a id, not a tag name,your code will call on html like
<pre id="pre">
</pre>
if you want to select elementnot by id but form tag name use document.querySelectorAll("pre")[0] or document.querySelector("pre")
remember querySelectorAll return an array!!
getElementById selects an element with defined id as in your case pre as an id.
You must have an id attached to your element same that of argument in getElementById().
Or, you can use getElementsByTagName which selects element given in argument.
<li class="catalog-list-item" data-icon="false">
<a href="/items/170893265">
How would I get the href /items/ and console.log the ID under catalog-list-item?
I tried parentNode and stuff, nothing seems to work for me.
To log the href attribute, I'd do something like this
$(".catalog-list-item a").each(
function(){
console.log($(this).attr("href"));
});
I don't completely catch the idea of logging the ID - there is no ID mentioned in your code example.
By using jQuery selector (jQuery documentation, W3Schools), you can retrieve all anchor tags that are children of an element with the '.catalog-list-item' class.
var allAnchorTags = $(".catalog-list-item a");
You can get the href attribute value by using .attr-method.
With the .replace-method you can replace the '/item/' string in front of the id.
I want to reload a particular div, which has an id corresponding to a table element's id... (the div has only one table child).
the alert says tID is undefined.
javascript:
function (msg) {
var tID = $("table", msg).attr('id');
alert(tID);
$("#reloadme_"+tID).html(msg);
}
html:
<div id="reloadme_2036">
<table id="2036" class="customCSSclass">
...table contents...
</table>
</div>
Where have I gone wrong?
find looks for descendants of the current set of elements inside the jQuery object, you should use .filter which filters the elements in the jQuery object itself:
$('<table id="001">[...]</table>')
//the jQuery object will contain a reference to the parsed <table> element,
//so you have to .filter() the jQuery object itself to extract it
Of course, if it is the only element inside the jQuery object, there is no need for filtering. =]
Also, you'd use .find for e.g. looking for tr/tds (or any other element(s)) that are descendant of the table element referenced inside of your jQuery object.
Maybe this is what you're looking for?
function reload(msg) {
var tID = msg.match(/id="(\d{1,4})"/i)[1]; //find 1 to 4 digits in the id attribute
alert(tID); //alerts 2036
$("#reloadme_"+tID).html(msg); //adds the content to the div
}
reload('<table id="2036" class="customCSSclass"> ...table contents... </table>');
If so, what you are likely looking for is javascript's .match() method which will find the id number within a string.
Check out the JSFiddle.
You have to try like this
var msg='<table id="2036" class="customCSSclass"></table>';
alert($(msg).attr("id"));
Let's say that I have a DOM object:
var a = document.getElementById('parent')
I want to search all input inside element a.
What should I do in jQuery?
I want to disable all input inside a, like syntax below:
$('#parent input').attr('disabled',true);
I tried
$(a).children('input').attr('disabled',true);
but gave no results.
Note: var a is an element I got from another function.
$(a).find('input').prop('disabled', true);
children() just searches immediate children of the element while find() searches all descendants.
Update: Also consider sinsedrix's remark on the difference between attr() and prop().
Don't forget attr is for HTML attributes and prop for DOM properties, try this:
$(a).find('input').attr('disabled','disabled');
or
$(a).find('input').prop('disabled',true);
$(a).find('input').attr('disabled',true)
$(a).find('input').attr('disabled',true);