Getting specific objects from a selected list - javascript

I think I'll have to hit myself in the head after that.
Let's say I have html like this:
<div class="some-class"></div>
<span class="some-class"></span>
Somewhere I select items like this:
var items = $(".some-class");
And somewhere later I would like to get only the divs from the items. I know I could use:
var divs = $("div.some-class");
But is there a simple way, without doing more selections or iterating through elements by .each? Something like items.someFunction("div")?

You're looking for jQuery filter:
var items = $(".some-class"),
divs = items.filter("div");

Related

Getting the index of an array item in vanilla javascript when new items are pushed

<label for="accTopic">Accordion Topic</label><br/>
<input type="text" name="accTopic" id="accTopic"><br/><br/>
<label for="accordionPanel">Accordion Content</label><br/>
<textarea name="accordionPanel" id="accordionPanel" rows="20" cols="50"></textarea><br>
let items = [];
function getItems() {
let accTopic = document.getElementById("accTopic").value;
let accPanel = CKEDITOR.instances.accordionPanel.getData();
items.push(
{
topic: accTopic,
panel: accPanel,
}
);
return(items);
}
Hello and thank you for looking at this. I am hoping to figure out how to get the index of the above array so I can assign to a button for editing.
Project Info:
I'm hoping to create a tool that customers can use to build an accordion without writing HTML but just pasting the HTML into the source code of CK Editor.
My obstacle is assigning the index of the array to a variable that I can reference from the HTML to edit the topic/detail of an accordion item.
Basically, if I had to talk it out, would go like this:
Accordion item created. It's the third item in the array
There is a for loop that assigns the appropriate classes, IDs and attributes to the items which allows expanding/collapsing of items
There is an 'Edit' button that allows someone to edit the accordion item, which is identified by the index of the array via an HTML attribute. This assignment would be assigned in the for... loop. If it's the third item, the index would be 2 which would trigger an edit function.
Am I off-base with this? Please let me know and thank you,
You can directly get all the items using document.querySelectorAll and get the index of the clicked element using Array#indexOf.
let items = [...document.querySelector('.accordion').querySelectorAll('.accordion-item')];
let index = items.indexOf(elem);

Javascript selectors how to only get first ranking a refs

Hi there I'm fiarly new to coding. and doing some javascipt layouting. but I need to make some variables. and don't know how. I want to make a dropdown menu. for this site. bertconinx.com now in order to do the thing I want to do I need to be albe to select a href without having to change any html. let the browser go to the link and then execute some javascript so what I need to do is find a way how to select the specific a href. I need to select the head menu intem without selecting any submen Items. because they should be dropdowns on a clickevent.
I got as far as this..
a href="http://bertconinx.com/category/portrets/">Portrets</a
a href="http://bertconinx.com/category/weddings/">Weddings</a>
should load first and then should dropdown his submenu clickevents.
but slecting the a href seems trick I've tried.
var MenuEvent = document.getElementsByClassName("menu-item").getElementsByTagName("a");
But it does not work.
Any Ideas on how to select them?
thanks.
The documentNode.getElementsByClassName returns a list of items, so while you can call .getElementsByTagName on each one, you can't call the function on the list directly. What you need to do is something like
// initialize an array to hold the anchors we get, and get all menu items on the document
var firstAnchors = [],
menuItems = document.getElementsByClassName('menu-item');
// iterate through the menu items and their specific anchors, adding only the first one of each menu item to our list
for(var menuItem of menuItems){
firstAnchors.push(menuItem.getElementsByTagName('a')[0]);
}
// now, our anchors should be here
console.log(firstAnchors);
var parentMenus = [],
parentMenueElems = document.getElementById("menu-main-nav").children;
for(var parentMenueElem of parentMenueElems){
if(!parentMenueElem){continue;}
var parentMenue = {
"name": parentMenueElem.firstElementChild.text,
"anchor": parentMenueElem.firstElementChild
};
parentMenus.push(parentMenue);
}
console.log(parentMenus)
OutPut:
[
{"name":"Portrets","anchor":element},
{"name":"Weddings","anchor":element},
{"name":"Wild","anchor":element},
{"name":"Commercial Work","anchor":element},
{"name":"About","anchor":element}
]
Example: element --> Portrets
Now you can perform any event on element
parentMenus[2].anchor.click();

How to insert a button using classname tag in javascript?

i try to insert a button in gmail page.
it works fine using getElementsbyTagName() and appendchild().
But i want to insert the button in a classname like
i am also tried getElementsByClassName(),document.getElementsByClassName('abc')[0] and querySelectorAll().
i have got a
mainDiv value from <div id=:ab>
var mainDiv=document.getElementById(':ab');
var newDiv=document.createElement('div');
newDiv.setAttribute('id','innerdiv11');
var newButton=document.createElement('input');
newButton.type='button';
newButton.value='Encrypt';
newButton.id='btn11';
newDiv.appendChild(newButton);
//mainDiv.insertBefore(newDiv, mainDiv.lastChild);
mainDiv.appendChild(newDiv);
Now i need to get mainDiv value from <div class="abc"> value.
How can i achieve this?
i am using chrome browser.
Regards
Sanju
When you do sth like
var abc_array= document.getElementsByClassName("abc"); abc_array will have the array with the elements with "abc" class. You need to write a simple loop to find the value like...
var class_string =[];
for(var i=0;i<abc_array.length;i++){
class_string=class_string.push(abc_array.innerHTML);
}
//now you can return which class_string[0] or whatever you want.

Making a javascript call work for multiple div boxes

I've got the following JavaScript code, which works great for the divs "from" and "copy" (when the user clicks "copy" it copys from "from"). I'm using ZeroClipboard.
clip.addEventListener('mouseDown', function() {
var pre = document.getElementById('from');
clip.setText(pre.innerHTML);
});
clip.glue('copy');
However, I want this to work for multiple divs - now it only works for the first one. I'm no JS expert so I humbly ask of you to explain how to do this. I'll use PHP to name my divs from1, from2, from3 etc and copy1, copy2, copy3 respectively.
You want to use var divs = document.getElementsByTagName('div') and then iterate over the divs object.
Steve's answer will work for all divs on the page. Assuming you have some divs that you don't want copied, a better solution will be:
var pre = document.getElementsByClassName('copy');
Amd then using a for to itterate the resulting array.
for(i=0; i<pre.length; i++){
clip.setText(pre[i].innerHTML);
}

How to swap two div tags?

I want to swap two html div tags entirely, tags and all. I tried the code below code but it does not work.
jQuery('#AllBlock-'+Id).insertAfter('#AllBlock-'+Id.next().next());
How to swap two div tags entirely.
You have some bracket mismatching in your code, it looks like you might be trying to do this:
jQuery('#AllBlock-'+Id).insertAfter($('#AllBlock-'+Id').next().next());
Which would take something like:
<div id="AllBlock-5"></div>
<div id="AllBlock-6"></div>
<div id="AllBlock-7"></div>
And, if called with Id 5, turn it into this:
<div id="AllBlock-6"></div>
<div id="AllBlock-7"></div>
<div id="AllBlock-5"></div>
This is because you're taking block 5, and moving it (using insertAfter) to the place after the block that's next().next() (or next-but-one) from itself, which would be block 7.
If you want to always swap #AllBlock-Id with #AllBlock-[Id+2], so they switch places and end up like the following:
<div id="AllBlock-7"></div>
<div id="AllBlock-6"></div>
<div id="AllBlock-5"></div>
You might want to try:
var $block = jQuery('#AllBlock-'+Id);
var $pivot = $block.next();
var $blockToSwap = $pivot.next();
$blockToSwap.insertBefore($pivot);
$block.insertAfter($pivot);
You can't do this because you can't concatenate a string and a jQuery object.
Try this:
var div = $('#AllBlock-'+Id);
div.insertAfter(div.next().next());
it should be like this
you should close the bracket after Id,
jQuery('#AllBlock-'+Id).insertAfter('#AllBlock-'+Id).next().next());
You'll need to detach the existing dom object first, then re-use it later:
$('#divid').detach().insertAfter('#someotherdivid');
What I understand is you want to swap a div when clicked with the last div. What will you do if it is the last div? move it to the top?
This solution should solve the problem, furthermore, you can modify this regex to match the format of your ID. This can probably be made more concise and robust. For example, you could get the last ID a bit more sophisticatedly. This may just be modifying the selector or something more. I mean, you do not want to go rearranging the footer or something just because its the last div on the page.
$('div').click(function() {
//set regex
var re = /(^\w+-)(\d+)$/i;
//get attr broken into parts
var str = $(this).attr('id').match(re)[1],
id = $(this).attr('id').match(re)[2];
//get div count and bulid last id
var lastStr = $('div:last').attr('id').match(re)[1],
lastID = $('div:last').attr('id').match(re)[2];
//if we have any div but the last, swap it with the end
if ( id !== lastID ) {
$(this).insertAfter('#'+lastStr+lastID);
}
//otherwise, move the last one to the top of the stack
else {
$(this).insertBefore('div:first');
} });
Check out this working fiddle: http://jsfiddle.net/sQYhD/
You may also be interested in the jquery-ui library: http://jqueryui.com/demos/sortable/

Categories