I need value of div custom attribute in Jquery [closed] - javascript

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
Please check code below ,
<div class="cp_option_color">
<div id="cp-power-manual" class="configure-seats-section">
<!-- power or manual append -->
</div>
<div class="validation-message" style="display:none">Please Select Color</div>
<div class="cp-color-item-content" data-name="199538" style="display: none;">
<h2>Black</h2>
<ul>
<li data-li="Power Recline">
<div class="cp-recline" recline="power">
Power Recline:
<span class="">
<img src="checkmark.png" alt="">Ships in
<lable class="shipmentmsg">6 Days</lable>
</span>
</div>
</li>
</ul>
</div>
<div class="cp-color-item-content" data-name="199539" style="display: inline-block;">
<h2>Brown</h2>
<ul>
<li data-li="Power Recline">
<div class="cp-recline" recline="manual">
Power Recline:
<span class="">
<img src="checkmark.png" alt="">Ships in
<lable class="shipmentmsg">6 Days</lable>
</span>
</div>
</li>
</ul>
</div>
</div>
I need custom attribute value of 'recline' attribute. If you see, there are same class name of its parent div(cp-color-item-content). But one is display none and another is display block. So, i need custom attribute value of 'display:block' div (i need 'manual' value).
Your help would be appreciated.
Thanks


While you should be using data-recline="power" for custom attributes, you can use
.attr("recline")
the selector can include :visible to exclude the hidden one, giving:
$(".cp-recline:visible").attr("recline")
Updated snippet (no change to HTML)
console.log($(".cp-recline:visible").attr("recline"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="cp-power-manual" class="configure-seats-section">
<!-- power or manual append -->
</div>
<div class="validation-message" style="display:none">Please Select Color</div>
<div class="cp-color-item-content" data-name="199538" style="display: none;">
<h2>Black</h2>
<ul>
<li data-li="Power Recline">
<div class="cp-recline" recline="power">
Power Recline:
<span class="">
<img src="checkmark.png" alt="">Ships in
<lable class="shipmentmsg">6 Days</lable>
</span>
</div>
</li>
</ul>
</div>
<div class="cp-color-item-content" data-name="199539" style="display: inline-block;">
<h2>Brown</h2>
<ul>
<li data-li="Power Recline">
<div class="cp-recline" recline="manual">
Power Recline:
<span class="">
<img src="checkmark.png" alt="">Ships in
<lable class="shipmentmsg">6 Days</lable>
</span>
</div>
</li>
</ul>
</div>
</div>


For defining your own custom attributes in HTML, you need to use the prefix as data-*
To get the value of that custom attributes you have defined in your HTML through jQuery, you can use the .data() method.
Check the below demo:
let customAttributeValue = $('#this-is-my-id').data('this-is-custom-id');
console.log(customAttributeValue)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="this-is-my-id" data-this-is-custom-id="manual"></div>
Now coming to your code, you can try this:
let reclineValue = $('.cp-recline:visible').data('recline');
console.log("reclineValue is: ", reclineValue)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cp_option_color">
<div id="cp-power-manual" class="configure-seats-section">
<!-- power or manual append -->
</div>
<div class="validation-message" style="display:none">Please Select Color</div>
<div class="cp-color-item-content" data-name="199538" style="display: none;">
<h2>Black</h2>
<ul>
<li data-li="Power Recline">
<div class="cp-recline" data-recline="power">
Power Recline:
<span class="">
<img src="checkmark.png" alt="">Ships in
<lable class="shipmentmsg">6 Days</lable>
</span>
</div>
</li>
</ul>
</div>
<div class="cp-color-item-content" data-name="199539" style="display: inline-block;">
<h2>Brown</h2>
<ul>
<li data-li="Power Recline">
<div class="cp-recline" data-recline="manual">
Power Recline:
<span class="">
<img src="checkmark.png" alt="">Ships in
<lable class="shipmentmsg">6 Days</lable>
</span>
</div>
</li>
</ul>
</div>
</div>

Related

jQuery get attibutes and values from all elements inside a class

I'm scraping a website where it has the following HTML structure
<div id="list" class="book-list">
<div id="stream_1" class="stream collapsed">
<h3 id="s-1" rel="1"><div><a name="st_1" class="st st_1">Version 1</a></div></h3>
<div class="volume last">
<h4 id="v-1-1">Volume 1<span class="range">Chapter 1</span></h4>
<ul class="chapter">
<li id="b-922893" class="new">
<span>
<a class="ch sts sts_1" target="_blank" href="link/1">vol.1 ch.1</a>
</span>
<i>Yesterday 08:27 am</i>
<em>
1
3
6
10
all
of 44 </em>
</li>
</ul>
</div>
</div>
<div id="stream_5" class="stream">
<h3 id="s-5" rel="5"><div><a name="st_5" class="st st_5">Version 2</a></div></h3>
<div class="volume last">
<h4 id="v-5-">Volume <i>[Null]</i><span class="range">Chapter 1</span></h4>
<ul class="chapter">
<li id="b-922873" class="new">
<span>
<a class="ch sts sts_5" target="_blank" href="links5/c1/1">ch.1</a>
</span>
<i>Yesterday 08:10 am</i>
<em>
1
3
6
10
all
of 44 </em>
</li>
</ul>
</div>
</div>
</div>
I want to use jQuery to get the links from the divs to get something like this
{
"vol.1 ch.1" : "link/1",
"ch.2" : "link/2"
}
As all the items i want has the class ch sts i wanted to get them with the selector, and trying to use each() but didn't work as it shows nodes...
Here's what how i'm trying:
$d('.ch').map(function(){
console.log('This: href',$(this).attr("href"));
}).get();

It is simpler than you thought. Since you've mentioned that you only want to parse links with ch sts classes, I changed the selector.
var map = {};
$(".ch.sts").each(function() {
map[$(this).text()] = $(this).attr("href");
});
console.log(map);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="list" class="book-list">
<div id="stream_1" class="stream collapsed">
<h3 id="s-1" rel="1"><div><a name="st_1" class="st st_1">Version 1</a></div></h3>
<div class="volume last">
<h4 id="v-1-1">Volume 1<span class="range">Chapter 1</span></h4>
<ul class="chapter">
<li id="b-922893" class="new">
<span>
<a class="ch sts sts_1" target="_blank" href="link/1">vol.1 ch.1</a>
</span>
<i>Yesterday 08:27 am</i>
<em>
1
3
6
10
all
of 44 </em>
</li>
</ul>
</div>
</div>
<div id="stream_5" class="stream">
<h3 id="s-5" rel="5"><div><a name="st_5" class="st st_5">Version 2</a></div></h3>
<div class="volume last">
<h4 id="v-5-">Volume <i>[Null]</i><span class="range">Chapter 1</span></h4>
<ul class="chapter">
<li id="b-922873" class="new">
<span>
<a class="ch sts sts_5" target="_blank" href="links5/c1/1">ch.1</a>
</span>
<i>Yesterday 08:10 am</i>
<em>
1
3
6
10
all
of 44 </em>
</li>
</ul>
</div>
</div>
</div>

Get all the Elements with class name.
Get the text value and "href" attribute.
x = document.getElementsByClassName("ch sts");
for(i =0; i<x.length; i++) {
console.log(x[i].text +" "+ x[i].getAttribute("href"));
}

How to get specific HTML or text in website in C#

So I have this HTML website that has code like this:
<ul class="WCVH WKVH" role="list">
<li class="WIUH" role="listitem">
<div class="WKUH">
<label id="labeledImage.POSTED_DATE--uid6-formLabel" data-automation-id="formLabel"></label>
</div>
<div class="WMUH">
<div class="WDBN WMP WDCN" data-automation-id="responsiveMonikerInput" id="labeledImage.POSTED_DATE--uid6">
<div class="WIBN">
<ul tabindex="-2" class="WCHJ WHBN" role="list" data-automation-id="selectedItemList">
<li class="WGHJ" role="presentation">
<div class="WOGJ WFHJ" tabindex="-2" id="b7e15031a749444a855366b1f1a87a46" data-automation-id="menuItem" aria-label="Posted Today, press delete to clear value." role="listitem" aria-posinset="1" aria-setsize="1">
<div class="WPGJ">
<div class="WACI">
<ul class="WCBI WIBI" role="presentation">
<li class="WPBI"><img class="gwt-Image WHWI WFPJ WKQJ" src="https://vps-wd5.myworkdaycdn.com/assets/ui-html/update/WorkdayApp/8CB9E57BEDDE62E4F67DEB6E19F5308C.cache.png" draggable="false" data-automation-id="POSTED_DATE_charm" alt="" aria-label=""
aria-labelledby="promptOption"></li>
</ul>
<div class="gwt-Label WBCI" data-automation-id="promptOption" id="promptOption" title="Posted Today" aria-label="Posted Today" data-automation-label="Posted Today" aria-labelledby="labeledImage.POSTED_DATE--uid6-formLabel">Posted Today</div>
<ul class="WCBI"></ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="WIUH" role="listitem">
<div class="WKUH">
<label id="labeledImage.JOB_TYPE--uid7-formLabel" data-automation-id="formLabel"></label>
</div>
<div class="WMUH">
<div class="WDBN WMP WDCN" data-automation-id="responsiveMonikerInput" id="labeledImage.JOB_TYPE--uid7">
<div class="WIBN">
<ul tabindex="-2" class="WCHJ WHBN" role="list" data-automation-id="selectedItemList">
<li class="WGHJ" role="presentation">
<div class="WOGJ WFHJ" tabindex="-2" id="5c6eda594d0d46609fa4c8e2ff13e731" data-automation-id="menuItem" aria-label="Full time, press delete to clear value." role="listitem" aria-posinset="1" aria-setsize="1">
<div class="WPGJ">
<div class="WACI">
<ul class="WCBI WIBI" role="presentation">
<li class="WPBI"><img class="gwt-Image WHWI WFPJ WCQJ" src="https://vps-wd5.myworkdaycdn.com/assets/ui-html/update/WorkdayApp/8CB9E57BEDDE62E4F67DEB6E19F5308C.cache.png" draggable="false" data-automation-id="JOB_TYPE_charm" alt="" aria-label="" aria-labelledby="promptOption"></li>
</ul>
<div class="gwt-Label WBCI" data-automation-id="promptOption" id="promptOption" title="Full time" aria-label="Full time" data-automation-label="Full time" aria-labelledby="labeledImage.JOB_TYPE--uid7-formLabel">Full time</div>
<ul class="WCBI"></ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="WIUH" role="listitem">
<div class="WKUH">
<label id="labeledImage.JOB_REQ--uid8-formLabel" data-automation-id="formLabel"></label>
</div>
<div class="WMUH">
<div class="WDBN WMP WDCN" data-automation-id="responsiveMonikerInput" id="labeledImage.JOB_REQ--uid8">
<div class="WIBN">
<ul tabindex="-2" class="WCHJ WHBN" role="list" data-automation-id="selectedItemList">
<li class="WGHJ" role="presentation">
<div class="WOGJ WFHJ" tabindex="-2" id="cc054d6cca664a3282855669711520d5" data-automation-id="menuItem" aria-label="T_R_1616417, press delete to clear value." role="listitem" aria-posinset="1" aria-setsize="1">
<div class="WPGJ">
<div class="WACI">
<ul class="WCBI WIBI" role="presentation">
<li class="WPBI"><img class="gwt-Image WHWI WFPJ WBQJ" src="https://vps-wd5.myworkdaycdn.com/assets/ui-html/update/WorkdayApp/8CB9E57BEDDE62E4F67DEB6E19F5308C.cache.png" draggable="false" data-automation-id="JOB_REQ_charm" alt="" aria-label="" aria-labelledby="promptOption"></li>
</ul>
<div class="gwt-Label WBCI" data-automation-id="promptOption" id="promptOption" title="T_R_1616417" aria-label="T_R_1616417" data-automation-label="T_R_1616417" aria-labelledby="labeledImage.JOB_REQ--uid8-formLabel">T_R_1616417</div>
<ul class="WCBI"></ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
I need to get the specific Requisition ID: T_R_1616417 but I got error that they cannot find the ID in the div element tag.
Error Code
`An unhandled exception of type 'WatiN.Core.Exceptions.ElementNotFoundException' occurred in WatiN.Core.dll
Additional information: Could not find DIV element tag matching criteria: Attribute 'id' equals 'labeledImage.JOB_REQ--uid8' at https://hpe.wd5.myworkdayjobs.com/en-US/Jobsathpe/job/BEP01---Embassy-Prime-BEP01/AMS-Profiling-Data-Specialist_1000713
`
Here's my code in C# in grabbing the specific item:
reqID = browser.Div(Find.ById("labeledImage.JOB_REQ--uid8")).OuterText.ToString();
How can i get the correct value "T_R_1616417" in this line of html code in C# format?

Add a class in an anchor tag within a div with jquery

does anyone know how Can I add a class in the A tag:
Subscribe
Here is my html:
<div class="module" id="prod-subscription">
<div class="entity entity-bean bean-ap-bl-instruct contextual-links-region block container">
<div class="contextual-links-wrapper contextual-links-processed">
<a class="contextual-links-trigger" href="#">Configure</a>
<ul class="contextual-links">
<li class="bean- first last">
bloc
</li>
</ul>
</div>
<div class="row">
<div class="col-md-3">
<h2>simple<span>in 3 </span></h2>
</div>
<div class="col-md-6">
<ol>
<li>
<span>1</span><p>text</p>
</li>
<li>
<span>2</span><p>texte testx</p>
</li>
<li>
<span>3</span><p>and text</p>
</li>
</ol>
</div>
<div class="col-md-3">
Subscribe
</div>
</div>
</div>
</div>

you can use
$('a[href="/souscription/digital-vie"]').addClass('classHere');
or
$('div#prod-subscription a[href="/souscription/digital-vie"]').addClass('classHere');
or
$('a[href="/souscription/digital-vie"]:contains("Subscribe")').addClass('classHere');
$('a[href="/souscription/digital-vie"]:contains("Subscribe")').addClass('classHere');
.classHere{
background : red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="module" id="prod-subscription">
<div class="entity entity-bean bean-ap-bl-instruct contextual-links-region block container">
<div class="contextual-links-wrapper contextual-links-processed">
<a class="contextual-links-trigger" href="#">Configure</a>
<ul class="contextual-links">
<li class="bean- first last">
bloc
</li>
</ul>
</div>
<div class="row">
<div class="col-md-3">
<h2>simple<span>in 3 </span></h2>
</div>
<div class="col-md-6">
<ol>
<li>
<span>1</span><p>text</p>
</li>
<li>
<span>2</span><p>texte testx</p>
</li>
<li>
<span>3</span><p>and text</p>
</li>
</ol>
</div>
<div class="col-md-3">
Subscribe
</div>
</div>
</div>
</div>

You could use jQuery's filter function and filter the link where the exact text is 'Subscribe' (this may cause problems if you have multiple links with that exact text)
$('a').filter(function() {
return $(this).text() === 'Subscribe';
}).addClass('new-class');
.new-class {color:red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Subscribe

Not sure I fully understand the question. Do you just want to give the anchor tag a class? That can be done as simply as <a class="your_class" href="your_link">Subscribe</a>

keypress in appended html [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 7 years ago.
<input type="text" id="message" param="1" placeholder="chat here.." />
This is element inside the div which is working fine outside the javascript
here is the case after appended element
$('.chat-wrapper').append('<li class="one-big-icon mega-li mgl-10"> <span class="mega-icon"><img alt="example image" class="chat-initatior" src="'+img_url+'"></span> <span class="badge vd_bg-red">10</span> <div class="vd_mega-menu-content open-top width-xs-4 width-md-5 width-lg-4 center-xs-4 chat-box'+id+'" data-action="click-target"> <div class="child-menu"> <div class="title"> ujwal <i>(online)</i> <div class="vd_panel-menu"> <div data-rel="tooltip" data-original-title="Close" class="menu entypo-icon"> <i class="icon-cross"></i> </div> </div> </div> <div class="content-list content-image content-menu"> <div data-rel="scroll"> <ul class="list-wrapper pd-lr-10"> <li> <div class="menu-icon"><img alt="example image" src=""></div> <div class="menu-text"> Do you play or follow any sports? <div class="menu-info"> <span class="menu-date">12 Minutes Ago </span> </div> </div> </li> </ul> </div> <div class="closing chat-area"> <div class="chat-box"> <input type="text" id="message" placeholder="chat here.." /> </div> <div class="vd_panel-menu"> <div data-rel="tooltip" data-original-title="Insert Picture" class="menu"> <i class="icon-camera"></i> </div> <div data-rel="tooltip" data-original-title="Emoticons" class="menu"> <i class="fa fa-smile-o"></i> </div> </div> </div> </div> </div> <!-- child-menu --> </div> <!-- vd_mega-menu-content --> </li>');
Now when I do
$('#message').keypress(function(event){
alert('WORKING');
});
alert('working') only works when I type any key in the first element after the append is made on some click and if I type something inside that appended input box I get nothing but why?

Look at using .on() or .live() depending on your jQuery version to bind to elements that are appended.
$("div").on( "keypress", "#message", function(){
alert( "working!" );
});
where div is the selector of a parent of #message.

here work fine;
https://jsfiddle.net/mig1098/0rgd3ppu/
var id='one',img_url='http';//test values
$('.chat-wrapper').append('<li class="one-big-icon mega-li mgl-10"> <span class="mega-icon"><img alt="example image" class="chat-initatior" src="'+img_url+'"></span> <span class="badge vd_bg-red">10</span> <div class="vd_mega-menu-content open-top width-xs-4 width-md-5 width-lg-4 center-xs-4 chat-box'+id+'" data-action="click-target"> <div class="child-menu"> <div class="title"> ujwal <i>(online)</i> <div class="vd_panel-menu"> <div data-rel="tooltip" data-original-title="Close" class="menu entypo-icon"> <i class="icon-cross"></i> </div> </div> </div> <div class="content-list content-image content-menu"> <div data-rel="scroll"> <ul class="list-wrapper pd-lr-10"> <li> <div class="menu-icon"><img alt="example image" src=""></div> <div class="menu-text"> Do you play or follow any sports? <div class="menu-info"> <span class="menu-date">12 Minutes Ago </span> </div> </div> </li> </ul> </div> <div class="closing chat-area"> <div class="chat-box"> <input type="text" id="message" placeholder="chat here.." /> </div> <div class="vd_panel-menu"> <div data-rel="tooltip" data-original-title="Insert Picture" class="menu"> <i class="icon-camera"></i> </div> <div data-rel="tooltip" data-original-title="Emoticons" class="menu"> <i class="fa fa-smile-o"></i> </div> </div> </div> </div> </div> <!-- child-menu --> </div> <!-- vd_mega-menu-content --> </li>');
$('#message').keypress(function(event){
alert(event.keyCode);
});

How to set up multiple tabs navs in Bootstrap

I am trying to implement a list of data where each of the items, have a tab (pills actually) menu.
The problem is that when I do this, they are interfeering with each other, making it only possible to have 1 active tab at a time, even though they have different id's.
Here is how i am doing it:
First I have one of the menus of tabs/pills for one of the items in the list:
<div class='col-md-12'>
<div class='row'>
<div class='col-md-12' style='margin-top: -50px;'>
<ul class='nav nav-pills'>
<li class='active'><a data-toggle='tab' href='#vis_opgave1'>Vis opgave</a></li>
<li><a data-toggle='tab' href='#rediger_opgave1'>Rediger Tekst</a></li>
<li><a data-toggle='tab' href='#admin_opgave_billeder1'>Administrer billeder</a></li>
</ul>
</div>
</div>
</div>
And here is the content divs for holding the associated datas:
<div id='vis_opgave1' class='tab-pane fade in active'>
<div class='row'>
aaaaaaaa11111111111
</div>
</div>
<div id='rediger_opgave1' class='tab-pane fade'>
<div class='row'>
bbbbbbb11111111
</div>
</div>
<div id='admin_opgave_billeder1' class='tab-pane fade'>
<div class='row'>
cccccccccc1111111
</div>
</div>
I have created a jsfiddle to show you the problem: http://jsfiddle.net/kx96pndg/
When one of the tabs is selected, you can see that the active content of the other nav menu dissapears.
I really hope someone can help me out here. Any help will be greatly appreciated.

You're missing <div class="tab-content"></div> around the tab-panes. See example.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<p> </p>
<p> </p>
<div class='col-md-12'>
<div class='row'>
<div class='col-md-12' style='margin-top: -50px;'>
<ul class='nav nav-pills'>
<li class='active'><a data-toggle='tab' href='#vis_opgave1'>Vis opgave</a>
</li>
<li><a data-toggle='tab' href='#rediger_opgave1'>Rediger Tekst</a>
</li>
<li><a data-toggle='tab' href='#admin_opgave_billeder1'>Administrer billeder</a>
</li>
</ul>
</div>
</div>
</div>
<div class="tab-content">
<div id='vis_opgave1' class='tab-pane fade in active'>
<div class='row'>aaaaaaaa11111111111</div>
</div>
<div id='rediger_opgave1' class='tab-pane fade'>
<div class='row'>bbbbbbb11111111</div>
</div>
<div id='admin_opgave_billeder1' class='tab-pane fade'>
<div class='row'>cccccccccc1111111</div>
</div>
</div>
<p> </p>
<p> </p>
<div class='col-md-12'>
<div class='row'>
<div class='col-md-12' style='margin-top: -50px;'>
<ul class='nav nav-pills'>
<li class='active'><a data-toggle='tab' href='#vis_opgave2'>Vis opgave</a>
</li>
<li><a data-toggle='tab' href='#rediger_opgave2'>Rediger Tekst</a>
</li>
<li><a data-toggle='tab' href='#admin_opgave_billeder2'>Administrer billeder</a>
</li>
</ul>
</div>
</div>
</div>
<div class="tab-content">
<div id='vis_opgave2' class='tab-pane fade in active'>
<div class='row'>aaaaaaaa22222222</div>
</div>
<div id='rediger_opgave2' class='tab-pane fade'>
<div class='row'>bbbbbbb222222222</div>
</div>
<div id='admin_opgave_billeder2' class='tab-pane fade'>
<div class='row'>cccccccccc2222222</div>
</div>
</div>
</div>

I think you can use this plugin. bootstrap-multitabs

Categories

Resources