Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
Say I have a ul with the class name 'images' cotaining various li objects. I have the list pointed by a JS variable using
var list = document.GetElementsByClassName("images")[0]; //single 'images' exist in document
How do I search all li elements within the list pointed by var list? Searching on the Internet gave this-
var list = document.getElementsByClassName("images")[0];
var list = *!*element.*/!*getElementsByTagName("li"); // getting syntax error at this line
Is there a way to do this without jQuery?
Use querySelectorAll
When accessing DOM nodes you can use the now very common querySelectorAll.
Given an assumed html structure of:
<ul class="images">
<li>Bob Thorton</li>
<li>Joe Biden</li>
<li>Tom <strong>Yorke</strong></li>
</ul>
You're JavaScript would be:
// Query for the item
var items = document.querySelectorAll('.images li strong');
// Do what you need to do
// Note that items is an array so we access the first result [0]
items[0].style.color = '#f00';
Note that querySelectorAll returns a NodeList which similar to an array. In the above example we treat the list as an array and only fetch the first DOM Element to color red.
Demo
Here's a demo.
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
Each ArrayItem contains no. of Property like Id, Name, Description etc
But we want to Fetch ArrayItem with Help of Name Property .
So Please give me code suggestion in Jquery or backbonejs without using for loop.
If you are using BackboneJS, you already have UnderscoreJS installed. Underscore has several methods for searching through a collection. For instance, using _.findWhere(...):
var myArray = [ ... ];
var helpItem = _.findWhere(myArray, { name: 'help' });
This would return the first entry in the array that has a name property equal to 'help'. _.findWhere(...) can match multiple properties too. If you want to find an item with something other than direct equality of properties, you can use _.find(...):
var overTwentyOne = _.find(myArray, function(entry) {
return entry.age > 21;
});
This would return the first entry in the array whose age property was greater than 21.
Note also that most of the list-centric methods in Underscore are automatically mixed into all Backbone.Collection instances. So if you were searching through a Collection, the above findWhere(...) example could be more simply written as:
var helpItem = collection.findWhere({ name: 'help'});
This would return the first Backbone.Model instance from collection that had a property name equal to help.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I'm new to JS and for an assignment I have to remove a div from a facebook post. I'm using
var el = document.getElementsByClassName("someclass");
to find the div, since FB doesn't use ID tags. I can get a value if i run the var but its not working with removeChild for some reason.
getElementsByClassName returns list of elements.
Let us say you have a class with name "class1" attached to multiple elements inside the document, it will return all the elements with class name "class1".
You can iterate though result of getElementsByClassName like normal array.
For example:
if you want to remove first element that matches with this class name. then
el[0].parentNode.removeChild(el[0]).
But i would suggest having better logic to remove this element.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I have a list with items and want to update the item's order based on an "array" (it proved to be an object, not an array) with ids in the updated order.
It's "new_order" here:
$.post('/fetch/get_list', function(new_order)
{
// How should I handle new_order here?
}
How do I change the current list order to the "new_order"?
One idea would be to retrieve the entire list of HTML and all created with php. But I can't do like that in this case. The HTML that the current list consists of must be retained.
So, I just want to update the order of the items in the current printed list.
Hope you understand how I mean. :)
Something like this should work. JsFiddle
var reorder = function (new_order) {
// the list we're reordering
var $list = $("#the-list");
// ordered li elements will be placed here
var ordered = [];
// detach the li elements from the list
var $items = $list.find("li").detach();
// sort them using the order array
$items.each(function (i, item) {
var id = parseInt($(item).data("id"));
var pos = new_order.indexOf(id);
ordered[pos] = item;
});
// append the ordered li elements to the list
$(ordered).appendTo($list);
};
Note: This assumes that every li in the list has a corresponding id in the new_order array.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
i am curious to know, how can i assign multiple html elements to a single variable in jquery...
for an example if i am having...
$('.some').drags();
$('.some1').drags();
at one instance i want variable drgoff
var drgoff = $('.some').offset().top;
at other instance i want variable drgoff
var drgoff = $('.some1').offset().top;
i am using this drgoff in the function, so now my question is how can i get all that html elements in place of .some when that particular html element is called...
var drgoff is not inside function it is a global variable..
thanx for any help...
it can be done using if else also but that will be too lengthy..
Use jQuery's .add(). var drgoff = $('.some').add('.some1');
Live demo here (click).
Well don't know when you are setting the value for drgoff. If you have a function (as indicated in question), then you can pass it the class name for which you want to get the value like this:
function getDragOffValue(cname){
dragoff = $(cname).offset().top;
}
and use it like:
getDragOffValue(".name");
alert(dragoff);//gets value for elements with class .name
getDragOffValue(".name1");
alert(dragoff);//gets value for elements with class .name1
But I don't understand how your code will behave if you have multiple elements with same class name. It will return the offset().top value for first element in collection of elements with given class. In short $(".name").offset().top is as good as $(".name:first").offset().top.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I'm making an array of textstrings like this:
phone = $(data).find('.tel a')
I would like to apply a substring(8) to every item in the array called phone. Is a for-loop the best way to do it?
phone, as it stands, contains a jQuery object, which is an Array-like Object of DOM elements. If you want to iterate over all of them and get their inner text, applying .substring(8) to each, and building an array out of them, you can use something like this:
var phoneArray = $(data).find(".tel a").map(function (i, el) {
return $(el).text().substring(8);
}).get();
DEMO: http://jsfiddle.net/96HWv/
(in the demo, I had to emulate what data could be, although I'm guessing it is an HTML string in your real code)
You can use the map() method :
phone = phone.get().map(function(e) { return $(e).text().substring(8) });
FIDDLE
You can use the .each() function for this... Something like:
$(data).find('.tel a').each(function() {
$(this).text(function(index,text) {
return text+"substring(8)";
});
});
You can let jQuery do the work for you.
$(data).find('.tel a').addClass('substring');
jQuery will traverse the array of elements returned and add the class to all of them.