This question already has answers here:
Select elements by attribute
(17 answers)
Closed 6 years ago.
i have a situation in my page i don't have any clue other than this 2 clue to target
<div itemscope>
some <html>
........
</div>
how can i target div having itemscope i,e <div itemscope>
suppose i have structure like this
<div itemscope>
<a hrfe="http://www.a.com">a.com</a>
</div>
<div itemscope type="tang">
<a hrfe="http://www.b.com">b.com</a>
</div>
<div>
<a hrfe="http://www.c.com">c.com</a>
</div>
<div>
<a hrfe="http://www.d.com">d.com</a>
</div>
PLEASE SUGGEST ME WHAT THIS KIND OF SELECTOR IS CALLED SO THAT I CAN SEARCH IT ON STACKOVERFLOW
var allDivWith_itemscope = $('div[i don"t know what else]');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div itemscope>
<a hrfe="http://www.a.com">a.com</a>
</div>
<div itemscope type="tang">
<a hrfe="http://www.b.com">b.com</a>
</div>
<div>
<a hrfe="http://www.c.com">c.com</a>
</div>
<div>
<a hrfe="http://www.d.com">d.com</a>
</div>
Well there are two things i want to mention:
You have a typo with href attribute.
You should use data-* prefix for custom attributes.
So, on basis of these you can change to this:
<div data-itemscope>
Now in js/jquery/css you can do this:
// css
div[data-itemscope]{
properties:values;
}
// javascript
document.querySelector('div[data-itemscope]')
//jquery
$('div[data-itemscope]')
Related
This question already has answers here:
AngularJS - ng-disabled not working for Anchor tag
(14 answers)
Closed 5 years ago.
I try to disable <a> with ng-disabled but not work and I put disabled but it does not work too. My HTML like this
<div class="action-engine">
<a on-hold="engine()" class="btn3d default actived" ng-disabled="button_clicked">
<div class="back-overlay"></div>
<div class="inner-circle">
<div class="inner-icon"></div>
</div>
</a>
</div>
and I include in JS like this $scope.button_clicked = true;. I don't know it still can press. If you have some idea to solve my problem it helpful. Thanks
<div class="action-engine">
<a on-hold="engine()" class="btn3d default actived" ng-disabled="button_clicked">
<div class="back-overlay"></div>
<div class="inner-circle">
<div class="inner-icon"></div>
</div>
</a>
</div>
The a tag in html does not get disabled.
Use below class using
ng-class="{'avoid-clicks' : button_clicked }"
.avoid-clicks {
pointer-events: none;
}
Button should be used for ng-disabled:-
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.button_clicked = true;
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div class="action-engine">
<button on-hold="engine()" class="btn3d default actived" ng-disabled="button_clicked">
<div class="back-overlay"></div>
<div class="inner-circle">
<div class="inner-icon">Link</div>
</div>
</button>
</div>
</div>
This question already has answers here:
How do you select in-line text with Jquery?
(3 answers)
Closed 7 years ago.
I am trying to change the text of h1 tag but not other inner html. Here is my code
document.getElementById("wpbody-content").getElementsByClassName("wrap")[0].getElementsByTagName('h1')[0].innerHTML = 'Candidate Application Forms';
HTML code
<div id="wpbody-content">
<div class="wrap">
<h1>All Forms <a class="title-action" href="">Add New</a></h1>
</div>
</div>
I need to change only <h1>All Forms</h1> text not other inside the tag.
I need to do it without jQuery
Insert an extra span like this:
<div id="wpbody-content">
<div class="wrap">
<h1><span id="allForms">All Forms</span> <a class="title-action" href="">Add New</a></h1>
</div>
</div>
then manipulate it with:
document.getElementById('allForms').innerHTML = 'Candidate Application Forms';
Put All Forms in span with id like
<span id="spanId">All Forms </span>
now change content of span with id
If you want this without changing HTML:
But the best way is probably to wrap All Forms into an element, and change it.
var elt = document.getElementById("wpbody-content")
.getElementsByClassName("wrap")[0].getElementsByTagName('h1')[0];
elt.innerHTML = 'Candidate Application Forms ' + elt.children[0].outerHTML;
<div id="wpbody-content">
<div class="wrap">
<h1>All Forms <a class="title-action" href="">Add New</a></h1>
</div>
</div>
tl;dr jsFiddle
Every chunk of text is actually a TextNode. You can imagine your HTML like this:
<h1>
<text data="All Forms" />
<a class="title-action" href="">
<text data="Add New" />
</a>
</h1>
You can access those elements using HTMLElement.childNodes property:
var children = elm.childNodes;
for(var i=0,l=children.length; i<l; i++) {
if(children[i] instanceof Text)
return children[i];
}
HTMLElement.children is a list without Text nodes.
All you need is to add an id to your element and you can change it as you want.
document.getElementById("change").innerHTML="it is changed";
<div id="wpbody-content">
<div class="wrap">
<h1 id="change">All Forms <a class="title-action" href="">Add New</a></h1>
</div>
</div>
It depends on the HTML in the wrap-html tag, you could use javascript replace function on the innerHTML String, with an easy regular Expression like /<h1>[^<]*/.
/<h1>[^<]*/ matches "<h1>...until next less-then-sign (<)"
here is an example:
var newHeader = 'Candidate Application Forms'
var htmlValue = document.getElementById("wpbody-content").getElementsByClassName("wrap")[0].innerHTML;
document.getElementById("wpbody-content").getElementsByClassName("wrap")[0].innerHTML =
htmlValue.replace(/<h1>[^<]*/,"<h1>" + newHeader);
// Tested with Win7 on Chrome 46+
<div id="wpbody-content">
<div class="wrap">
<h1>All Forms <a class="title-action" href="">Add New</a></h1>
</div>
</div>
If you do not want to change your document's current structure, I suggest you to change only the first child of the H1 node:
var h1=document.getElementById("wpbody-content").getElementsByClassName("wrap")[0].getElementsByTagName('h1')[0];
h1.firstChild.nodeValue='Candidate Application Forms';
HTML
<div class="topparent">
<div class="secondparent">
<div class="firstparent">
<a href="#" class="link" >Menu Link</a>
</div>
</div>
</div>
here I want to get <div class="secondparent"> by jQuery or JavaScript. My code would be on Anchor Tag and i want to get its second most parent element by Index number. Or is there any other way? I don't want get element by hard coded ID or CLASS.
You can use parents() and eq()
Using parents() you can get all ancestors
eq() will help to select by index
CODE:
var p1=$('a.link').parents().eq(0);
var p2=$('a.link').parents().eq(1);
var p3=$('a.link').parents().eq(2);
console.log(p1.attr('class'),p2.attr('class'),p3.attr('class'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="topparent">
<div class="secondparent">
<div class="firstparent">
<a href="#" class="link" >Menu Link</a>
</div>
</div>
</div>
Hi now you can used to parent()
var p1=$('a.link').parent();
var p2=$(p1).parent();
var p3=$(p2).parent();
console.log(p1.attr('class'),p2.attr('class'),p3.attr('class'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="topparent">
<div class="secondparent">
<div class="firstparent">
<a href="#" class="link" >Menu Link</a>
</div>
</div>
</div>
This question already has answers here:
jQuery ID selector works only for the first element
(7 answers)
Closed 8 years ago.
I started to making Java Script with jquery, i need simple code to make my divs hidden and shown by clicking on the link
JS:
$(document).ready(function(){
$('#show').click(function() {
var cname = this.className;
if ($(cname).is(':visible')) {
}
else ($('#cont').is(':visible')) {
$('#cont').slideToggle('slow');
$(cname).slideToggle('slow');
}
});
});ยจ
HTML:
<a class="home" id="show" href="#">Home</a>
<a class="contact" id="show" href="#">Contact</a>
<a class="about_us" id="show" href="#">About us</a>
<div id="cont" class="home" style="Display :visible ;">
</div>
<div id="cont" class="contact" style="Display :none ;">
</div>
<div id="cont" class="about_us" style="Display :none ;">
</div>
IDs are supposed to be unique, so an ID can only be used on one element. It would seem that you have gotten classes and IDs mixed up, as classes can be used on multiple elements. Your markup should be something like:
<div id="home" class="cont">Home</div>
<div id="contact" class="cont">Contact</div>
<div id="about" class="cont">About</div>
And in your JS you would select $('.cont') instead.
Here is my accordion how can i apply some stylesheet to this, so that looks like a tree.
eg: + when accordion tab is closed and - when accordion is open
<div class="Accordion" id="systemAccordion" tabindex="1">
<div class="AccordionPanel">
<div class="AccordionPanelTab"> <a onClick="showSystemSpan();">System</a></div>
<div class="AccordionPanelContent">
<a onClick="showPatchesSpan();">Patches</a><br/>
<a onClick="showNetworkSpan();">Network</a><br/>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab" > <a onClick="showNone();">User Environment</a></div>
<div class="AccordionPanelContent">
<a onClick="showEnvironmentVariableSpan();">Environment Variables</a><br/>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"> <a onClick="showSystemSpan();">{mainData::#product}</a></div>
<div class="AccordionPanelContent">
<a onClick="showOdbcSpan();">ODBC</a><br/>
<a onClick="showBitmodeSpan();">Bitmode</a><br/>
</div>
</div>
<script type="text/javascript">
var sysAcc = new Spry.Widget.Accordion("systemAccordion", {defaultPanel: -1, useFixedPanelHeights: false });
</script>
</div>
If you look in the SpryAccordion.css stylesheet you will find
.AccordionPanelTab {}
.AccordionPanelOpen .AccordionPanelTab {}
You can set whatever background image you like on those two to get the effect you are after .AccordionPanelTab will affect the normal state and .AccordionPanelOpen .AccordionPanelTab will affect the open state. There are also comments in the stylesheet telling you what the different classes do.
use css background image propeties and apply it to proper css class when its open and closed.