Jquery custom attribute access - javascript

there is a div present in my js file
<div id="myid" data="mydata"></div>
when i try to access custom attribute data with pure javascript
var data = document.getElementById('myid').getAttribute('data');
jquery alone
var data = $("#"+myid).attr('data');
above both mwthods are working properly but when i try to used the both jquery and javascript
var data = $("#"+myid).getAtrribute("data");
then is is giving error? but didn't able to get the reason ? can anyone explain please?

You are applying a dom method to a jquery object which causes error instead jquery has a method to convert the selector to the dom element .get():
$("#"+myid).get(0).getAtrribute("data");
alert($('#myid').get(0).getAttribute('data'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myid" data="mydata"></div>
As you are using a data attribute then better to use data-* attribute and jQuery has a method to get it with .data() method:
<div id="myid" data-mydata="CustomisedData"></div>
then in the jQuery:
$('#myid').data('mydata'); // will give you "CustomisedData"

Because $("#"+myid) is a jQuery instance, not HTML Element object. So you can't use DOM methods on some arbitrary object.
jQuery instance object is an array-like collection of DOM elements. It means that you can extract individual DOM element from it by index if you really need. So in your case you could do this:
$("#" + myid)[0].getAtrribute("data");
jQuery also offers dedicated method for it $.fn.get:
$("#" + myid).get(0).getAtrribute("data");

This should work:
var data = $("#"+myid)[0].getAtrribute("data");
Because to use javascript code, you need to use DOM object but jQuery uses array-like collection object.

Related

Edit results of outerHTML with jQuery

I'm trying to read in the entire page's HTML (including the doctype) then remove a few parts of the page in order to pass it as a string via AJAX.
What I have so far is:
var page = doctype + document.documentElement.outerHTML;
This gives me the content that I want, but when I try to use jQuery's .remove() function, I'm getting undefined is not a function.
page.remove(".my-class");
I assume I'm doing something with the variable type wrong? How can I grab the full page source such that I can still manipulate it with jQuery?
You need to put the html into a jQuery object in order to manipulate it. After you do that you can use the jQuery's find method then remove method to remove elements that match .my-class:
var $page = $(doctype + document.documentElement.outerHTML);
$page.find(".my-class").remove();
After that you can get the resulting html by doing:
var htmlToSendViaAjax = $page[0].outerHTML;
If you want to manipulate HTML with jQuery, you have to call the jQuery constructor:
var page = $(doctype + document.documentElement.outerHTML);
page.remove(".my-class");
Your problem is that page is not a jQuery object and as such doesn't have methods like .remove().
If you want the outerHTML with jQuery, you need to make a jQuery selection:
$("#selector");
$(document); // for the entire document
Then you can use a solution found here to get the outerHTML of the first element in the selection (you can use a for or each loop if you do it for lots of elements:
var $selection = $("#selector")
$selection[0].outerHTML;

Jquery finding elements with HTML5 data attributes, using data object

I'm looking in parent divs for child elements that have a specific HTML5 data attribute. This code was working fine:
$('#parent').find('*[data-something]').css('color', 'red');
Then I found out that you can find HTML data attributes using Jquery's data object http://api.jquery.com/data/#data-html5
So I tried...
$('#parent').find($("#parent").data("something")).css('color', 'red');
...and it doesn't work. Does anyone know why?
JSFIDDLE: http://jsfiddle.net/Qct9v/
Note: I have to use find() because I need to search child elements.
It doesn't work because data() is not a filter method, it is a getter/setter method used to get/set the data value.
If you want to use jQuery data then try something like
$("body").find('*').filter(function(){
return $(this).data('something') != undefined
})

Using HTML5 Data Attribute in jQuery Selector

Noob Question on Data Attribute
I was wondering will using data-attribute in jQuery Selector can bring any trouble in the future?
I'm trying to reduced the usage of .class and #id as jQuery Selector, since most of data I'm working on will generated from data-attribute
example of the code
$(document).ready(function(){
var mydata = $(document).data('my-data-attribute');
});
will the code above slowing the load time?
or
$('[data-suffix-attribute="some_value"]').each(function(){
......
});
or
$('[data-suffix-attribute="delete"]').click(function(){
// delete action happening here
});
will this bring trouble?
$(document).ready(function(){
var mydata = $(document).data('my-data-attribute');
});
The code above will not work. If you want to read the HTML5 data attribute of an element using the jQuery .data() method firstly you need to select the relevant element using a jQuery selector and then you can use the method as is shown below:
var mydata = $('.example').data('suffix');
This will read the value of the data-suffix attribute of an element with a class of "example".
The other important thing to note when using the .data() method is that you have to omit the data- prefix from the selector to read the value stored in that attribute.
The way you have selected the attribute before the .each() method will work:
$('[data-suffix-attribute="some_value"]');
However, it would be better if you can narrow it down to a specific element like:
$('div[data-suffix-attribute="some_value"]');
This is because the first selector will go through every node in the document which will take more time whereas the second will only go through the div tags in the document.
The attribute selector is supported by the native query selectors so it is fine. As far as future is concerned I don't think in near future it will be a problem.
But it will be better if you can use a element selector attached to the attribute selector like $('div[data-suffix-attribute="delete"]')
If you are very worried about performance it will be a better choice to add a class attribute to the desired elements and then use class selector
It would be better to use id in selector which is fast obviously,
If you have multiple data attributes then it is better to use $('[data-suffix-attribute="delete"]').click();.
Instead of this you can use the parent selector for your data-attribute elements like,
$('#parentId').on('click','[data-suffix-attribute="delete"]',function(){
// delete action happening here
});
#parentId contains all data attribute elements

Getting html DOM element from JQuery element

Below code gives me JQuery object, which includes JQuery functions associated with.
var element = $("#element");
But how can I get the HTML DOM element from the above JQuery object ?
Fetch first item from jQuery object
var element = $("#element")[0];
You can use get (link to API).
element.get()
It will return an array.

How do I use jQuery on an HTML document instead of the DOM?

I'm trying to modify an HTML document, but its not the same as the DOM. However, I found that the syntax that I used with the DOM itself doesn't work with the other document. For example, I could find the title using $("title") with the DOM. However, with the document I have to use doc.find("title"). There are other, more involved changes and I'm stuck on how to proceed with this. Is there a reference I can look at? I know about the jQuery documentation, but that assumes that you're manipulating the DOM itself.
From what I've gathered the $ function assumes it's default scope for selectors is the active document. if you create jQuery objects that are not in the body of the document, the $(object).find(selector) is your best way to select within that object. The rest of the functions should work fine, at least the ones dealing with selecting, transversing and manipulation.
I should add that if the object is a jQuery object, there is no need to use the $. All the jQuery functions will be available to that object. So if you create:
var obj = $('<div>some text</div>');
you can use obj.addClass('cool) to get a jQuery object containing
<div class="cool">some text</div>
You can use jQuery on your doc by using the following
$("title", doc)
You pass the string "doc" to jQuery and it will use that instead of the DOM

Categories