I want to insert a label called "octosplit-label" right under the current octosplit-label.
How do I do this in Javascript?
I had an attempt that didn't work here
function addOneCheckbox($label) {
$('#issues-container .table-list').append($label);
}
Try modifying your function like this:
function addOneCheckbox($label) {
$('#octosplit-label').after($label);
}
Remember that IDs should be unique, so the HTML contained within $label should not have the same ID (which is octosplit-label) and also there should be no other labels currently on the page with that same ID.
This should work for you (from jQuery documents:
function addOneCheckbox($label) {
$($label).insertAfter('#octosplit-label');
}
The $label needs to be all of the html for the label.
Please keep in mind that IDs have to be unique; therefore you cannot give the new label the same ID as the existing one:
$('#octosplit-label').after( $('<label/>',{'id':'some_id','for':'if_so_desired'}) );
Reference:
jQuery.after() API Documentation
You should add some validation before try to modifying the DOM.
function addOneCheckbox(label) {
var element = $('#issuelist').find('#octosplit-label');
if(element.length > 0) {
element.append(label);
}
}
Related
The accessibility of a Tabulator Table by a global variable works fine, but i can't realy use global Variables, because i'm dynamically generating new Tables.
I just want to access the Tabels by their Container ID.
The code below shows accessability by global variable "table" and by ID, which is provided by the examples (http://tabulator.info/examples/4.3#adddel), but does not work.
See my JSFiddle example of this: https://jsfiddle.net/vs43re6p/41/
$('#button').click(function() {
table.addRow({});
});
$('#button2').click(function() {
$("#example-table").tabulator("addRow", {});
});
What am i doing wrong?
If you want to use jQuery selection you need to have the Tabulator jQuery wrapper installed:
http://tabulator.info/docs/4.3/install#setup-jquery
Maybe something like this...
$('#button2').click(function() {
const table = new Tabulator("#example-table");
table.addRow({});
});
or
(function() {
const table = new Tabulator("#example-table");
$('#button2').click(function() {
table.addRow({});
});
})();
As long as you are using Tabulator 4.5 or above you can lookup a table by the element ID by using the findTable function on the Tabulator prototype
var table = Tabulator.prototype.findTable("#example-table")[0]; // find table object for table with id of example-table
The findTable function will return an array of matching tables. If no match is found it will return false
Full details can be found in the Options Documentation
I am creating a plugin for a template. After publishing the template to the web, there is an attribute inside an inserted script that I need to get its value and use it in my plugin.
Is there a way to do it with JS/jQuery?
Here is the part of the page in which the attribute is located:
Platform.Utils.initWidget('#skyline', function (elem) {
new Website.tool.Constantin(elem, {
event: 'click',
transitionDuration: 93000
});
});
I need to find a way to search the html and get the value for transitionDuration i.e 93000.
Additional comment:
This code is generated by the template and I have no control on changing how it is formed.
I inspected the html, and the template places the code as a JS code ( "the code" ) somewhere in the body.
So I assumed that there might be a way that the plugin that I am making could be able to read the html, find the attribute and use it to get the same transition duration that the html defines on its elements.
After re-reading and seeing your comments, I assume your template inserts
a script somewhere and you want to get at the transitionDuration with the plugin.
As in
var scripts = document.getElementsByTagName("script"), duration=0;
for (var i=0;i<scripts.length;i++) {
var text = scripts[i].textContent;
if (text.indexOf("transitionDuration") !=-1) {
duration = parseInt(text.split("transitionDuration:")[1],10);
break;
}
}
alert(duration);
<script>
Platform.Utils.initWidget('#skyline', function (elem) {
new Website.tool.Constantin(elem, {
event: 'click',
transitionDuration: 93000
});
});
</script>
You can get CSS values in javascript and jQuery but in this case, is better if you store the value in a variable.
var transDuration = 93000;
Platform.Utils.initWidget('#skyline', function (elem) {
new Website.tool.Constantin(elem, {
event: 'click',
transitionDuration: transDuration
});
});
alert(transDuration);
You can access to the transDuration variable when you need it.
If you need to read a CSS value, take a look at this:
Get a CSS value with JavaScript
Good luck
how to store data received from below Jquery for further use.
$('#div').find('a').each(function() {
console.log($(this).attr('href'));
});
http://jsfiddle.net/mvm6o208/ you can find my code here.
Make an array and push values to it. Like
var store = [];
$('#div').find('a').each(function() {
store.push($(this).attr('href'));
});
Update : According to the html in the fiddle you have posted, the selector should be $('div').find('a') instead of $('#div').find('a'), as you dont have any div with id div. See a working fiddle here.
Also as per the inputs from comments below, it would be faster approach to push to an array via
store[store.length] = $(this).attr('href');
var refsArray = $('#div').find('a').map(function(item) {
return $(item).attr('href');
});
You are targeting a div and not a thing like this id="div", so you just need to remove the # :
$('div').find('a').each(function() {
console.log($(this).attr('href'));
});
I have the following script which is working nicely to hide a DIV when its child is empty:
jQuery(".field-items").filter(function() {
return !$.trim(this.innerHTML);
}).parent().parent().parent().parent().parent().parent().hide();
If that same DIV is empty from above I also want to hide another DIV on the same page. It's not a parent.
How can I add the following code to the above code? So that both occur when that specific DIV is empty?
$('#survey-monkey-title').hide();
var $empty = jQuery(".field-items").filter(function() {
return !$.trim(this.innerHTML);
});
if ($empty.length) {
$empty.parent().parent().parent().parent().parent().parent().hide();
$('#survey-monkey-title').hide();
}
I'd also like to give Brian Giaz his propers for utilizing .add() below:
$empty.parent().parent().parent().parent().parent().parent().add('#survey-monkey-title').hide();
You can use the add() function to add additional elements to the jquery object:
$('#elem').parent().add('#otherElem').hide();
for example.
I know you already got it working, but consider updating the stringed parent() calls to just a single parentUntil function.
var $empty = jQuery(".field-items").filter(function() {
return !$.trim(this.innerHTML);
});
if ($empty.length) {
$empty.parentsUntil('.someSelector').hide();
$('#survey-monkey-title').hide();
}
I just started out on jQuery and want to use it to solve this problem: I have a list of email addresses from different domains currently residing inside divs. Using .each(), want to loop through each email addresses and only pick out those that do not have the domain '#gmail.com'. In other words, somebody#yahoo.com gets appended to another div, file somebody#gmail.com does not. How can I do this?
jQuery
Currently the code simply grabs all emails but does no filtering
$('.email_address').each(function() {
$(this).html().appendTo('#filtered_email_address');
});
Pretty simple:
$('.email_address').not(':contains("#gmail.com")').each(function() {
$(this).clone().appendTo('#filtered_email_address');
});
If you specifically want to filter them, try this:
$('.email_address').filter(function() {
return $(this).text().indexOf('#gmail.com') != 0;
}).each(function() {
$(this).clone().appendTo('#filtered_email_address');
});
you can do this easy with indexOf method:
$('.email_address').each(function() {
var email = $(this).text()
if (email.indexOf('#gmail.com') == -1)
('#filtered_email_address').append(email);
});