I need to get the 'role' attribute of a div with a dynamically generated ID in regards to the below code.
HTML:
<div id="renable0" role="0">
false
</div>
<div id="renable1" role="1">
true
</div>
<!-- THE LIST OF DIVS CONTINUES IN INCREASING INCREMENTS OF 1 -->
Javascript:
$("[id^='renable']").editInPlace({ // editInPlace is a jQuery plugin
url: 'save.php',
params: 'pos='+$(this).attr('role') // How can I get this role attribute for the clicked div?
});
You'll need to use a .each() loop:
$("[id^='renable']").each(function() {
$(this).editInPlace({
url: 'save.php',
params: 'pos='+$(this).attr('role')
});
});
It would be nice if editInPlace allowed the params option to be a function, like some other jQuery plugins do for similar options. But since it doesn't, you need to do this.
BTW, your use of the role attribute doesn't match the way it's intended to be used as part of ARIA. Standard roles are things like button and menuitem. You shouldn't abuse standard attributes like this, or make up custom attributes. If you want to put extra attributes in your elements, use data-XXX elements, e.g.
<div id="renable0" data-role="0">
You can access this in jQuery with $(this).data('role').
this won't refere to your element, you should keep a reference to it:
// loop through your elements
$("[id^='renable']").each(function () {
// keep reference to it
var $elem = $(this);
// make it editInplace
$elem.editInPlace({
url: 'save.php',
params: 'pos='+$elem.attr('role')
});
});
Related
I have the followings defined :
var excludedFiltersPanel = $("#excludedFiltersPanel");
var includedfiltersPanel = $("#includedfiltersPanel");
where *Panel is just a div.
in excludedFiltersPanel there are some div's with attribute data-iscorefilter="true" e.g. :
<div id="filterPanel-LastName" class="filterPanel" data-iscorefilter="true">
<Some Stuff here!>
</div>
I am trying to get them and move them to includedfiltersPanel:
It seems neither of these is a correct syntax:
excludedFiltersPanel.('[data-iscorefilter="true"]')
excludedFiltersPanel.$('[data-iscorefilter="true"]')
1.What is the correct syntax?
2.How do I append them to includedfiltersPanel? (I know how to append a single item, but not sure what is the common good practice here, e.g. using for loop or some JQuery magic)
Since excludedFiltersPanel there are some div's with attribute data-iscorefilter="true"
Use .find()
Description: Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.
It would look like :
excludedFiltersPanel.find('[data-iscorefilter="true"]')
var hslider_slider_id = jQuery('.hslider_misc_holder').attr('id').slice(8);
activate_width_checker(1080, 1080, 'responsive', hslider_slider_id);
This code is overriding a conflict between fullpage.js and WP Hero Slider I have two pages with two sliders. This code is being called successfully on the first slider, but not the second. I need to refactor the code in order to make sure the JS function is called on the second slider, which has the same ID .hslider_misc_holder, not just the first. Do i need to run it through a loop in order to achieve this??
Or use .map
The conflict is causing the Hero Slider not to load full size.
Ant
First, the . prefix signifies a class and not an ID. The # prefix should be used for selecting an element by id.
Update your question to include an HTML snippet so I can understand the structure.
It sounds like you want to select multiple elements by class and then loop though these and pass the id (or a direct reference to the object) into the function.
var sliders = jQuery('.hslider_misc_holder');
$.each(sliders, function(idx, slider) {
activate_width_checker(1080, 1080, 'responsive', $(slider).attr('id'));
});
You can use a REGEX in selector. For example, on onclick event.
On two elements in html:
<div id="div1">DIV1</div>
<div id="div2">DIV2</div>
Now in JavaScript:
`
$('[id ^= DIV').on('click', function(){alert();});
`
REGEX selector allow find all id in html with same pattern.
I hope help you.
--- UPDATED
When you call .attr("id") the jQuery will return only the ID of the first element in the set. You will have to perform a look trought the set:
$(".hslider_misc_holder").each(function () {
activate_width_checker(1080, 1080, 'responsive', $(this).attr("id").slice(8));
});
I have a bunch of DIVs identified by class screen-cat-comment and I want for each div to execute a plugin that receives as a parameter an attribute value from each DIV.
<div class="screen-cat-comment" catId="1"></div>
<div class="screen-cat-comment" catId="2"></div>
<div class="screen-cat-comment" catId="3"></div>
then, the selector
$('.screen-cat-comment').fragment({ code: $(this).attr('catId') });
Passing catId to myPlugin doesn't work -- from the current code, $(this).attr('catId') returns undefined. Is there any way to re-write this selector to pass attr('catId') to the plugin?
this in that context is probably the window...
$('.screen-cat-comment').each(function(){
$(this).fragment({ code: $(this).attr('catId') });
});
Is it possible to read a value from an element like this for ie
<div id="element" winner="first"></div>
So i can get the "first" value from winner?
Thanks in advance
You can, but you should use data attributes to store custom data:
<div id="element" data-winner="first"></div>
Now, you can use the .data() method:
$('#element').data('winner'); // "first"
If you can't use data attributes, you can use the .attr() method:
$('#element').attr('winner'); // "first"
var winner = $("#element").attr('winner');
If you have control over the markup, I would suggest not to make up your own attributes. Instead, use HTML5 data-* attributes.
I could use some help isolating an element or two and putting them into javascript variables. I am still learning how to properly identify things in the DOM, I have to imagine what I am trying to do is possible.
Consider the following:
$('.fancybox').fancybox({
'autoScale': false,
'type': 'iframe',
'padding': 0,
'closeClick': false,
helpers: {
overlay: {
closeClick: false
}
},
afterShow: function () {
$("#overlay_content_top").show();
$("#overlay_content_bottom").show();
},
afterClose: function () {
$("#overlay_content_top").hide();
$("#overlay_content_bottom").hide();
}
});
<div class ="example">
<a class="fancybox" href="http://my-iframe.example"><img src="myimage.jpg" width="x" height="y" /></a>
**<span>Important Information I need</span>**
</div>
I need to put the html from .example span into a variable and then apply it to something that is displaying in the fancybox.
So something like this in crazy pseudo code:
var getname = $(this).html('.example span');
$('.inherit_span').html(getname);
I have twenty different items on the page that can be clicked and I dont want to have to generate separate id's or names for each item, I would rather just grab the html from the span when the fancybox function is called and then apply that name to another element within the lightbox display. Any help appreciated.
You may have the scenario where there are multiple <a> tags with multiple <span> tags after them, in that case use the .next() method within the beforeShow callback like
beforeShow: function(){
var getname = $(this.element).next('span').html();
$('.inherit_span').html(getname);
}
NOTE: in order to make the variable getname available outside the callback, declare it at the beginning of your script like
<script>
var getname;
.
.
Actually you're pretty close! First you have to select get your span. You can get it's text or HTML by using either the text() method or the html() method!
var html = $('div.example > span').html()
Then you have to get your element you want to put the text to, and use the html() method with a value/variable within the brackets to set it.
$('.inherit_span').html(html);
Using html() without a value gets the value, using html() with a value sets the value!
The text() method works practically the same, but filters out any HTML formatting.
Just change:
var getname = $(this).html('.example span');
to:
var getname = $('.example span').html();
or:
$('.inherit_span').html($('.example span').html());