How to get the text of each item in class using Jquery - javascript

I have many structures like this:
<div class="passTab" data-name="">
<div class="logoTab" title="" onclick="openWindow('')">
<img class="logoImg" src="./">
<label class="title"></label>
</div>
<ul class="noteList">
<li><label class="l_mail note">some_text1</label></li>
<li><label class="l_nick note">some_text2</label></li>
<li><label class="l_pass note">some_text3</label></li>
</ul>
</div>
And i need to get text of each item in class separately.
I used:
$('.note').text()
and
$('.note').toArray($(this).text())

What is your problem? You can simply create an array and just add everything in a loop. For example with a loop from jQuery library:
let arr = [];
$('.note').each(()=>{
arr.push(this.text());
});
Or something like that...

Just loop through the notes using .each() or .map()
https://api.jquery.com/each/
https://api.jquery.com/map/
//Loop through notes and do something
$('.note').each((index, note) => console.log($(note).text()));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="passTab" data-name="">
<div class="logoTab" title="" onclick="openWindow('')">
<img class="logoImg" src="./">
<label class="title"></label>
</div>
<ul class="noteList">
<li><label class="l_mail note">some_text1</label></li>
<li><label class="l_nick note">some_text2</label></li>
<li><label class="l_pass note">some_text3</label></li>
</ul>
</div>

Related

jQuery - show and hide div related to different checkbox

Hello I'm fairly new to jQuery (and stackoverflow), i saw a few questions about showing/hiding div for checkbox but i couldn't find a solution that apply for several checkboxes at the same time.
I would like to make it work so that when my first checkbox is checked, the 1st div/panel just after is shown then hiden when uncheck. And the same thing for my second checkbox with its own panel.
Right now, both panel are shown when first checkbox (or second checkbox) is checked.
I don't know how to make it so the panel shown or hidden will be dependant of the checkbox (li?).
I would like a solution that could apply without touching the code when adding new checkboxes, so i think maybe ID shouldn't be use, right? is there any solution?
Your help is much appreciated!
Thanks in advance!
HTML :
<ul class="form-check-list">
<li class="js-tabCheck">
<label for="coupon" class="check">
<input type="checkbox" id="coupon" class="js-tabCheck-trigger">
<span class="check__name txt-bold">COUPON</span>
<span class="txt-notice txt-indent">-50%</span>
</label>
<div class="js-tabCheck-panel">
<p>coupon detail</p>
</div>
</li>
<li class="js-tabCheck">
<label for="coupon1" class="check">
<input type="checkbox" id="coupon1" class="js-tabCheck-trigger">
<span class="check__name txt-bold">COUPON1</span>
<span class="txt-notice txt-indent">-30%</span>
</label>
<div class="js-tabCheck-panel">
<p>coupon detail</p>
</div>
</li>
</ul>
JQUERY:
$(function(){
var checkbox = $('.js-tabCheck-trigger'),
panel = $('.js-tabCheck-panel');
panel.hide();
checkbox.change(function(){
if($(this).is(':checked')){
panel.show();
} else {
panel.hide();
};
});
});
by using the children method, you can call the respective div element.
and used 'parents' to access the outside element.
$(function(){
var checkbox = $('.js-tabCheck-trigger'),
panel = $('.js-tabCheck-panel');
panel.hide();
checkbox.change(function(){
if($(this).is(':checked')){
$(this).parents('li').children('.js-tabCheck-panel').show();
} else {
$(this).parents('li').children('.js-tabCheck-panel').hide();
};
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="form-check-list">
<li class="js-tabCheck">
<label for="coupon" class="check">
<input type="checkbox" id="coupon" class="js-tabCheck-trigger">
<span class="check__name txt-bold">COUPON</span>
<span class="txt-notice txt-indent">-50%</span>
</label>
<div class="js-tabCheck-panel">
<p>coupon detail</p>
</div>
</li>
<li class="js-tabCheck">
<label for="coupon1" class="check">
<input type="checkbox" id="coupon1" class="js-tabCheck-trigger">
<span class="check__name txt-bold">COUPON1</span>
<span class="txt-notice txt-indent">-30%</span>
</label>
<div class="js-tabCheck-panel">
<p>coupon detail</p>
</div>
</li>
</ul>

jQuery working in console but not when loading website

this is the code that is perfectly working in console:
jQuery(".cf7_wrap_com li").each(function(){
jQuery(this).find(".first_univer input").click(function(){
var label1 = jQuery(this).parent().find("label").html();
if( jQuery(this).is(":checked")) {
jQuery(this).parent().find(".first_high").show();
jQuery(".cf7_wrap_com li").not( jQuery(this).parent().parent() ).each(function(){
jQuery(this).find(".first_high").hide();
});
}
else {}
});
});
and the code below is what I saved in my custom js file and not working on website load
jQuery(document).ready(function( $ ){
jQuery(window).bind("load", function() {
jQuery(".cf7_wrap_com li").each(function(){
jQuery(this).find(".first_univer input").click(function(){
var label1 = jQuery(this).parent().find("label").html();
if( jQuery(this).is(":checked")) {
jQuery(this).parent().find(".first_high").show();
jQuery(".cf7_wrap_com li").not( jQuery(this).parent().parent() ).each(function(){
jQuery(this).find(".first_high").hide();
});
}
else {}
});
});
});
});
I also want to know if it is possible to trim this code as I think I might have added something which unnecessary.
I am using it on two radio buttons(which are inactive by default) and when a user clicks on either of them a short form opens.
Here's the image:
And this is the html:
<h1>What type of student?</h1>
<ul class="cf7_wrap_com first_use">
<li>
<div class="highschoolform first_univer"><input id="#school" name="School" type="radio" value="highschool" /> <label for="highschool">High School</label>
<div class="cf7_wrap_hs first_high">[contact-form-7 id="3552" title="High school"]</div>
</div>
</li>
<li>
<div class="unversityform first_univer"><input id="#University" name="School" type="radio" value="University" /> <label for="University">University</label>
<div class="cf7_wrap_uni first_high">[contact-form-7 id="3553" title="University"]</div>
</div>
</li>
</ul>
give the radios a class
use closest and siblings
$(function() {
$(".school").on("click",function() {
$(this).closest("ul").find(".first_high").hide();
$(this).siblings(".first_high").show();
});
});
.first_high { display:none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>What type of student?</h1>
<ul class="cf7_wrap_com first_use">
<li>
<div class="highschoolform first_univer">
<input id="#school" class="school" name="School" type="radio" value="highschool" />
<label for="highschool">High School</label>
<div class="cf7_wrap_hs first_high">[contact-form-7 id="3552" title="High school"]</div>
</div>
</li>
<li>
<div class="unversityform first_univer">
<input id="#University" class="school" name="School" type="radio" value="University" />
<label for="University">University</label>
<div class="cf7_wrap_uni first_high">[contact-form-7 id="3553" title="University"]</div>
</div>
</li>
</ul>

Input from a textbox and add into a list isn't working

I am trying to add a new item into a list from a text box using jQuery but it's not working. There are a lot of code here, I want to find the problem in my code.
HTML code
<div id="page">
<h1 id="header">LIST</h1>
<h2>Add</h2>
<ul>
<li id="one" class="hot"><em> Fresh </em>Figs </li>
<li id="two" class="hot"> Honey </li>
<li id="three" class="hot">Nuts </li>
<li id="four" class="hot">Bread </li>
</ul >
</div>
<div id="newItemButton"><button href="#" id="showForm">NEW ITEM</button>
</div>
</br>
<form id="newItemForm">
<input type="text" id="itemDescription" placeholder="Add a new item...."/>
<input type="submit" id="addButton" value="Add"/>
</form>
And the jQuery code
$(function(){
var $newItemButton=$('#newItemButton');
var $newItemForm=$('#newItemForm');
var $textInput=$('item:textbox');
$newItemButton.show();
$newItemForm.hide();
$('#showForm').on('click',function(){
$newItemButton.hide();
$newItemForm.show();
});
$newItemForm.on('submit',function(e){
var $newText=$('input:textbox').val();
$('li:last').after('<li>' + $newText + '</li>').val();
$newItemForm.hide();
$newItemButton.show();
$textInput.val(' ');
});
});
I know this has an accepted answer - and I didn't read your question fully so this may not do exactly what you want - but I wanted to present an alternate approach with less code. The following features a button that when you click it - takes the value from the textbox and appends it to the list (note that I gave the list an ID). Just so you have another option. You don't need tjhe form at all and you certainly don't need to submit it - just to get the value and append it to the list. Just saying.
$(document).ready(function(){
$('#addButton').click(function(){
var newItem = $('#itemDescription').val();
$('#myList').append('<li class="hot">' + newItem + '</li>');
$('#itemDescription').val('');
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="page">
<h1 id="header">LIST</h1>
<h2>Add</h2>
<ul id="myList">
<li id="one" class="hot"><em> Fresh </em>Figs </li>
<li id="two" class="hot"> Honey </li>
<li id="three" class="hot">Nuts </li>
<li id="four" class="hot">Bread </li>
</ul >
</div>
<input type="text" id="itemDescription" placeholder="Add a new item...."/>
<button type="button" id="addButton">Add</button>
check this fiddle.
you had a small error in your jQuery. Here is the working code:
$(function(){
var $newItemButton=$('#newItemButton');
var $newItemForm=$('#newItemForm');
var $textInput=$('#itemDescription');
$newItemButton.show();
$newItemForm.hide();
$('#showForm').on('click',function(){
$newItemButton.hide();
$newItemForm.show();
});
$newItemForm.on('submit',function(e){
e.preventDefault();
var $newText=$('#itemDescription').val();
$('li:last').after('<li>' + $newText + '</li>').val();
$newItemForm.hide();
$newItemButton.show();
$textInput.val(' ');
});
});
first you have to prevent the default behaviour from the form element on submit. To do this i added the e.preventDefault(); function. then I received this error:
Uncaught Error: Syntax error, unrecognized expression: unsupported
pseudo: textbox
To fix this, I changed the selector to the ID of the input field. Now it works perfectly fine.

how to bind the values of two different arrays with each other in angular js

hi i'm going to manage the user access levels with angular js and json.
i have two arrays one for menu structure and the other for access levels.
current access levels :
$scope.current_access_levels ={
"can_home":{"title":"home","value":true},
"can_mail":{"title":"mail","value":false}
};
menu structure :
$scope.menu = [
{"id":"1","name":"home","aclvl":"can_home"},
{"id":"2","name":"mail","aclvl":"can_mail"}
];
every menu field has an "aclvl" that matches with the names of objects in "current_access_level" array.
what i'm going to do is something like this :
<div ng-app="app" ng-controller="appCtrl">
<div ng-repeat="aclvl in current_access_levels">
<label>{{aclvl.title}}</label><input type="checkbox" value="1" ng-model="aclvl.value"/>
</div>
<br />
<br />
<ul>
<li ng-repeat="men in menu">
<input type="checkbox" ng-model="current_access_levels.(men.aclvl).value"/>{{men.aclvl}}
</li>
</ul>
</div>
for example if the "aclvl" of "men" is equal to "can_home" the checkbox value should be equal to "aclvl.can_home.value".
any body knows how should i handle this!?
i have added a fiddle to clear what i'm supposing to do.
thanks
angular.module('app',[])
.controller('appCtrl',function($scope){
$scope.current_access_levels ={"can_home":{"title":"home","value":true},"can_mail":{"title":"mail","value":false}};
$scope.menu = [{"id":"1","name":"home","aclvl":"can_home"},{"id":"2","name":"mail","aclvl":"can_mail"}];
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="appCtrl">
<!-- current access levels -->
<p>current access levels</p>
<div ng-repeat="aclvl in current_access_levels">
<label>{{aclvl.title}}</label><input type="checkbox" value="1" ng-model="aclvl.value"/>
</div>
<!-- current access levels -->
<br />
<div>{{current_access_levels}}</div>
<br />
<hr>
<!-- menu structure just for example -->
<p>menu structure</p>
<ul>
<li ng-repeat="men in menu">
<input type="checkbox" ng-model="current_access_levels.can_home.value"/>{{men.aclvl}}
</li>
</ul>
<!-- menu structure just for example -->
</div>
You can use [] with current_access_levels it like as -
<li ng-repeat="men in menu">
<input type="checkbox" ng-model="current_access_levels[men.aclvl].value"/>{{men.aclvl}}
</li>

jquery attr stopped working

I am very much sure it was working previously but don't know why it stop working
My script
$(document).ready(function () {
var Position = $("#test .active_r").attr('value');
});
My HTML
<div id="test">
<ul>
<li>
<label>
A Shift</label><div class="color10">
<div class="color12">
<div class="color11">
<span class="radio_span" id="spanOndutyPosition0" onclick="ActiveRadioOndutyPosition(0)">
<input type="radio" class="hidden_class" name="groupsettingOnDutyPosition" id="radiosettingOnDutyPosition0"
value="A Shift"></span></div>
</div>
</div>
</li>
<li>
<label>
B Shift</label><div class="color10">
<div class="color12">
<div class="color11">
<span class="radio_span active_r" id="spanOndutyPosition1" onclick="ActiveRadioOndutyPosition(1)">
<input type="radio" class="hidden_class" name="groupsettingOnDutyPosition" id="radiosettingOnDutyPosition1"
value="B Shift"></span></div>
</div>
</div>
</li>
<li>
<label>
C Shift</label><div class="color10">
<div class="color12">
<div class="color11">
<span class="radio_span" id="spanOndutyPosition2" onclick="ActiveRadioOndutyPosition(2)">
<input type="radio" class="hidden_class" name="groupsettingOnDutyPosition" id="radiosettingOnDutyPosition2"
value="C Shift"></span></div>
</div>
</div>
</li>
<li>
<label>
D Shift</label><div class="color10">
<div class="color12">
<div class="color11">
<span class="radio_span" id="spanOndutyPosition3" onclick="ActiveRadioOndutyPosition(3)">
<input type="radio" class="hidden_class" name="groupsettingOnDutyPosition" id="radiosettingOnDutyPosition3"
value="D Shift"></span></div>
</div>
</div>
</li>
<li>
<label>
Standby</label><div class="color10">
<div class="color12">
<div class="color11">
<span class="radio_span" id="spanOndutyPosition10" onclick="ActiveRadioOndutyPosition(10)">
<input type="radio" class="hidden_class" name="groupsettingOnDutyPosition" id="radiosettingOnDutyPosition10"
value="Standby"></span></div>
</div>
</div>
</li>
</ul>
</div>
It should give me value of Position variable but its undefined, any body know why attr is not working, don't kill me if its too simple. i worked a lot on it
Element with active_r is a span... Try...
var Position = $("#test .active_r input[type=radio]").val();
Your selector in not targetting inner input(type radio) element. Try this:
$(document).ready(function () {
var Position = $("#test .active_r input").attr('value');
});
That's because the .active_r class is on a <span>, which doesn't have value attribute.
So, just target the correct element and use .val(), like:
$("#test .active_r :checked").val();
Try this way:
$(document).ready(function () {
var Position = $("#test .active_r").find('input').val();
});
Try this
$(document).ready(function () {
var Position = $("#test .active_r").find('input').attr('value');
alert(Position)
});
DEMO
I think you are trying to get value of radio button inside span having class active_r .
Because there is no value attribute on span having class active_r
if i am right then try this:
$(document).ready(function () {
var Position = $("#test .active_r input[type=radio]").attr('value');
// OR
var Position = $("#test .active_r input[type=radio]").val();
});
This might help you.

Categories

Resources