$.grep filter with contains - javascript

I am trying to filter an array with grep to apply CSS. My code is like below.
var depos = $('.panel-default > .panel-heading');
var chkd = ['ABC','XYZ'];
var found_p = $.grep(depos, function(v) {
return jQuery.inArray(v.innerText,chkd);
});
The first issue is that found_p is not filtering the needed array values from chkd. After filtering it, how can I apply CSS? I tried like below but it fails
$(found_p[0]).css('background-color', 'red');
Can anybody help me out with this.

Assuming from your code that you're trying to find the elements that have innerText matching a value in the chkd array, you can use the filter() method. Try this:
var $depos = $('.panel-default > .panel-heading');
var chkd = ['ABC','XYZ'];
var $found_p = $depos.filter(function() {
return $.inArray($(this).text(), chkd) != -1;
});
The $found_p variable will then hold a jQuery object with all matched elements. You can apply CSS to them like this:
$found_p.css('background-color', 'red');
Example fiddle
However, I would suggest using CSS classes instead of adding inline styles as it is much better practice.

Related

Get only word part of an id/name

I have a div element with lots of descendent's elements, all with ids in the form "word1", for a simple example: id="moviment1" or id="type1".
I need to get only the written part of these ids (moviment or type), in order to concatenate their names with a increment of 1 (id="moviment2" or id="type2").
$clone.find('*').each(function() {
var id = $(this).prop('id');
var num = parseInt( $(this).prop("id").match(/\d+/g), 10 ) +1;
$(this).prop('id', id+num);
});
The way it is, I always get ids like id="moviment12". I already tried:
var id = $(this).prop('id').replace(/\d+/g, '');
or
var id = $(this).prop('id').match(/\w+/);
But I always get errors like "cannot read property 'replace'/'match' of undefined". So, what am I doing wrong? Any other ideas? Thank you very much!
Ideally you should use a template. Traversing and modifying parsed elements makes your code slow and hard to maintain.
If you want to increment the number part of the IDs by 1 you can use the replace method callback function:
$clone.find('[id]').prop('id', function(_, id) {
// Assuming `id` is `test_25_segment`
return id.replace(/(\d+)/, function(num) {
// |
// --- is 25
return +num + 1;
// |
// --- parses the matching string into integer
});
});
Here is a demo using the above snippet.
Easiest way, you could just add those values as data-attr:
<div id="type1" data-id="1" data-text="type"></div>
So you can easily get them separated just using .data('id') and .data('text').
You may select the elements by this way:
var all = [].filter.call(document.querySelectorAll('[id*=type]'), function(el) {
return (/\btype\d+\b/).test(el.id);
});
and then you can change the ids using methods like replace()
Try this...
var onlyAlphabets = id.split(/(\d)/)[0];

How to optimize or make this dynamic (html javascript)

i'm still new in html javascript. I want to ask can i use for loop to optimize or make this dynamic
var port = [];
port[0]=$('#slcPort_0').val();
port[1]=$('#slcPort_1').val();
port[2]=$('#slcPort_2').val();
port[3]=$('#slcPort_3').val();
port[4]=$('#slcPort_4').val();
i used this code in function to retrieve data from html form
thanks
You could use:
// selects all the elements whose 'id' starts-with "slcPort_":
var port = $('[id^=slcPort_]').map(function(){
// returns the value from those elements:
return this.value;
// converts to an array:
}).get();
This isn't guaranteed to be in numerical order, though it will be in order of the appearance of those elements in the DOM.
References:
Attribute-starts-with ([attribute^=value]) selector.
get().
map().
Simply, you can do the following:
var port = Array();
for (i = 0; i < 5; i++){
port[i] = $("#slcPort_"+i).val();
}
DEMO: http://jsbin.com/yiyaruweja/1/
It might make more sense to give all those elements a class, like slcPort. Then something like
var port = [];
$.each($('.slcPort'), function(index,value) {
port[index] = $(value).val();
});
Much prettier. Plus all those elements are related anyways, so just class em up.
$.each documentation

jQuery, search for element with value in attribute among the matched elements

I find a collection of a tags using jQuery like this:
itemsPresent = $('h3.zn-ItemTitle > a');
Later in my scripts I need to find the a within the matched elements with a specific url in its href attribute without making a new jQuery select.
How can I do this?
You can use the attribute equals selector:
itemsPresent = $('h3.zn-ItemTitle > a[href="http://your-url.com"]');
Alternatively, if you want to keep them as separate objects:
var itemsPresent = $('h3.zn-ItemTitle > a'),
filteredAnchors = itemsPresent.filter('[href="http://your-url.com"]');
Use .filter() to filter the Jquery object based on your desired conditions.
Try,
itemsPresent.filter(function(){
return $(this).attr('href') == 'something';
})
Or as BenM suggested you can use,
itemsPresent.filter('[href="something"]');
You can filter the collection
itemsPresent = $('h3.zn-ItemTitle > a');
var otherItems1 = itemsPresent.filter('[href="someUrl"]');
//or
var otherItems2 = itemsPresent.filter(function() {
return this.href.indexOf('someURL') != -1;
});
You can use filter:
var $a = itemsPresent.filter(function() {
return $(this).prop('href') == 'http://your-website.com';
});

Simple JSON array

I want to create a simple array like item_structure = {thumb, head, cont} and here is my code:
$('.items_options').find('#'+item_id+' .option .blog_item_structure li')
.each(function(event) {
var item_class = $(this).attr('class');
item_structure[] = item_class;
});
But it seems that expresion item_structure[] = ... is not working. So does anyone of you know what is rigt syntax?
Thx for your time.
You probably mean to push a value:
item_structure.push(item_class);
This adds item_class as the last element of item_structure.
For this to work item_structure must be an array, most easily made so this way:
item_structure = [];

Getting an element as jQuery object from a set of elements

Is there a way to get an element from a jQuery object, but as jQuery object?
If I wanted to get the text of elements, presently I'd write it like this:
var elements = $(".set");
for (var idx=0; idx<elements.size(); idx++) {
var text = $(elements.get(idx)).text();
// do something with text
}
Note that I have to wrap elements.get(idx) in another jQuery call $().
I realize this isn't that big a deal, I just want to make sure I'm not doing extra work if there is an easier way.
Have a look at .eq() [docs]:
// returns the third div (zero-indexed) in a jQuery wrapper
var $mydiv = $('div').eq(2);
Is this what you mean?
Why not go with:
$(".set").each(function (idx) {
var text = $(this).text();
// do something with text
});
you can use:
$(".set").each( function () {
var text = $(this).text();
// do stuff
});

Categories

Resources