Delete duplicate Item in Each function

Delete duplicate Item in Each function - javascript

I want to archive that I remove all duplicate items within every each.
So I go a div with items:
<div class="each">
<div>Test2</div>
<div>Test</div>
<div>Test</div>
</div>
<div class="each">
<div>Test2</div>
<div>Test</div>
<div>Test</div>
</div>
And my Jquery so far:
$('.dropPlace').each(function(index){
console.log($(this).text());
});
So I want to check within every div is there existing two duplicate text. And only removed with the duplicated once within the div.
So the result would be this:
<div class="each">
<div>Test2</div>
</div>
<div class="each">
<div>Test2</div>
</div>

The below can be optimized for sure, but it will give the result you asked for:
<div class="each">
<div>Test2</div>
</div>
<div class="each">
<div>Test2</div>
</div>
$('.each').each(function() {
const textAr = [];
let parent = $(this);
parent.children('div').each(function() {
let _this = $(this), elText = _this.text();
if(textAr.includes(elText)) {
parent.children('div').each(function() {
let _child = $(this);
if(_child.text() == elText){
_child.remove();
}
})
}
else textAr.push(elText)
});
});
.each {
margin-bottom: 1em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="each">
<div>Test2</div>
<div>Test</div>
<div>Test</div>
</div>
<div class="each">
<div>Test2</div>
<div>Test</div>
<div>Test</div>
</div>

here is a working demo.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
var map = {};
$("#remove").click(function () {
// use an object as map
var map = {};
$(".dropPlace").each(function () {
var value = $(this).text();
if (map[value] == null) {
map[value] = true;
} else {
$(this).remove();
}
});
});
});
</script>
</head>
<body>
<div class="each">
<div class="dropPlace">Test2</div>
<div class="dropPlace">Test</div>
<div class="dropPlace">Test</div>
</div>
<div class="each">
<div class="dropPlace">Test2</div>
<div class="dropPlace">Test</div>
<div class="dropPlace">Test</div>
</div>
<button id="remove">remove</button
</body>
</html>

Related

How to hide a div if another has no content

I have some code where I need to hide a div if another is empty.
Basically, if .plant_profile_link has no content, hide .plant_profile_display
My attempt
$(document).ready(function() {
if (!$.trim($(".plant_profile_link").html()) == true)
$(".plant_profile_display").hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="et_pb_text_inner">
<div class="plant_profile_display">Bobo</div>
</div>
</div>
<!-- .et_pb_text -->
<div class="et_pb_module et_pb_text et_pb_text_7_tb_body et_pb_text_align_left et_pb_bg_layout_light">
<div class="et_pb_text_inner">
<div class="plant_profile_link"></div>
</div>
<div class="et_pb_text_inner">
<div class="plant_profile_link"></div>
</div>

Your code works if we add jQuery
I would user toggle
$(function() {
$(".plant_profile_display").toggle($(".plant_profile_link").text().trim() !== "");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="et_pb_text_inner">
<div class="plant_profile_display">Bobo</div>
</div>
</div>
<!-- .et_pb_text -->
<div class="et_pb_module et_pb_text et_pb_text_7_tb_body et_pb_text_align_left et_pb_bg_layout_light">
<div class="et_pb_text_inner">
<div class="plant_profile_link"></div>
</div>
<div class="et_pb_text_inner">
<div class="plant_profile_link"></div>
</div>

Maybe something like this suits you
$(document).ready(function() {
var $plantLinks = $('.plant_profile_link')
var $plantDisplay = $('.plant_profile_display')
if($plantLinks.children().length > 0 || $plantLinks.text().length > 0) {
$plantDisplay.show();
} else {
$plantDisplay.hide();
}
});

checking if element's text is same as another element's text

I'm trying to do is when I click on a text, if another div has a child that contains this text fade in. but it's not working
$('.rel-head').click(function() {
if ($('.art-h .head-art'): contains($(this).text())) {
$(this).parent().fadeIn().siblings().fadeOut();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="art-h">
<div class="head-art">some text</div>
</div>
<div class="art-h">
<div class="head-art">anoter text</div>
</div>
<div class "related-heads">
<h1 class="rel-head">some text</h1>
</div>

Use selector :contains and concat the string properly.
$('.rel-head').click(function() {
if ($('.art-h .head-art:contains('+$(this).text()+')')) {
$(this).parent().fadeIn().siblings().fadeOut();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="art-h">
<div class="head-art">some text</div>
</div>
<div class="art-h">
<div class="head-art">anoter text</div>
</div>
<div class "related-heads">
<h1 class="rel-head">some text</h1>
</div>

It's not very efficient to search the entire body every time you click on each of the specified items.
This is what I'd do.
let headArtArray = $('.art-h .head-art'); //Assign it to a variable early to reduce searching
$('.rel-head').click(function() {
let el = $(this);
let text = el.text();
for (let i = 0; i < headArtArray.length; i++) {
if (headArtArray[i].innerText.includes(text)) {
el.parent().fadeIn();
} else {
$(headArtArray[i]).fadeOut();
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="art-h">
<div class="head-art">some text</div>
</div>
<div class="art-h">
<div class="head-art">anoter text</div>
</div>
<div class "related-heads">
<h1 class="rel-head">some text</h1>
</div>

How to change last position in toggleClass

I try build some project with JQuery toggleClass. I want make position toggle follow some last record data.
This my HTML
<div class="action-lock">
<div class="toggle-pane">
<div class='unique' id='switch'>
<div class='toggle-text-off'>Unlocked</div>
<div class='glow-comp'></div>
<div class='toggle-button'></div>
<div class='toggle-text-on'>Locked</div>
</div>
</div>
</div>
And this JQuery
$scope.last = "a";
$('.unique').click(function (e) {
e.preventDefault();
if($scope.last == "b"){
$(this).toggleClass('toggle-on');
}else{
$(this).toggleClass('toggle-off');
}
});
I try but toggle position always in Locked, I don't know how to make position toggle from data $scope.last. Please help me to solved this problem. Thanks

var app = angular.module("app", []);
app.controller('controllerName', ['$scope', function ($scope) {
$scope.last = ""
$scope.toggleclick = function(last){
debugger;
if(last == "a"){
$(".toggle-text-on").toggleClass('toggle-on');
$(".toggle-text-off").toggleClass('toggle-off');
}else if(last != "a"){
$(".toggle-text-on").toggleClass('toggle-off');
$(".toggle-text-off").toggleClass('toggle-on');
}
};
}]);
.toggle-text-off.toggle-on,.toggle-text-on.toggle-on{display:block;}
.toggle-text-off,.toggle-text-on{display:none;}
.maginbt10{margin-bottom:10px}
<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>
<body ng-app="app" ng-controller="controllerName">
<div class="action-lock">
<input type="text" ng-model="last" name="mail" class="maginbt10" />
<div class="toggle-pane">
<div class='unique' id='switch'>
<div class='toggle-text-off' ng-class="{'toggle-on':last != 'a'}">Unlocked</div>
<div class='glow-comp'></div>
<div class='toggle-button'></div>
<div class='toggle-text-on' ng-class="{'toggle-on':last == 'a'}">Locked</div>
</div>
</div>
</div>
</body>

You question isn't clear but this is my guess from your explanation.
$('.unique').click(function (e) {
e.preventDefault();
$(this).toggleClass('toggle-on').toggleClass('toggle-off');
});
and html
<div class="action-lock">
<div class="toggle-pane">
<div class='unique toggle-on' id='switch'>
<div class='toggle-text-off'>Unlocked</div>
<div class='glow-comp'></div>
<div class='toggle-button'></div>
<div class='toggle-text-on'>Locked</div>
</div>
</div>
</div>

var app = angular.module("app", []);
app.controller('controllerName', ['$scope', function ($scope) {
$scope.last = "a";
$scope.toggleclick = function(){
if($scope.last == "a"){
$(".toggle-text-on").toggleClass('toggle-off');
$(".toggle-text-off").toggleClass('toggle-on');
$scope.last = "b";
}else{
$(".toggle-text-on").toggleClass('toggle-on');
$(".toggle-text-off").toggleClass('toggle-off');
$scope.last = "a";
}
};
}]);
.toggle-on,.toggle-text-off.toggle-on{display:block;}
.toggle-off,.toggle-text-off{display:none;}
<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>
<body ng-app="app" ng-controller="controllerName">
<div class="action-lock">
<div class="toggle-pane">
<div class='unique' id='switch'ng-click="toggleclick()">
<div class='toggle-text-off' ng-click="toggleclick()">Unlocked</div>
<div class='glow-comp'></div>
<div class='toggle-button'></div>
<div class='toggle-text-on' ng-click="toggleclick()">Locked</div>
</div>
</div>
</div>
</body>

why the wrapAll in infinite-scroll, have many divs?

The last question is here:
Wrap some divs with Two different columns
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/infinite-scroll#3/dist/infinite-scroll.pkgd.min.js"></script>
<script type="text/javascript">
$('.wrapper').each(function() {
$(this).find(".lpost").wrapAll('<div class="left_columns"></div>')
$(this).find(".rpost").wrapAll('<div class="right_columns"></div>')
})
</script>
<div class="wrapper">
<div class="rpost">-115</div>
<div class="lpost">-91</div>
<div class="lpost">-99</div>
<div class="rpost">-181</div>
<div class="lpost">-19</div>
<div class="rpost">-135</div>
<div class="rpost">-85</div>
<div class="lpost">-39</div>
</div>
<script type="text/javascript">
var $container = $('.wrapper').infiniteScroll({
path: '.next-post',
append: '.post',
hideNav: '.pagination',
status: '.page-load-status',
});
$container.on('append.infiniteScroll',
function(event, response, path, items) {
$(function() {
$('.wrapper').each(function() {
$(this).find(".lpost").wrapAll('<div class="left_columns"></div>')
$(this).find(".rpost").wrapAll('<div class="right_columns"></div>')
})
});
});
</script>
If scroll down three pages result:
<div class="wrapper">
<div class="left_columns">
<div class="left_columns">
<div class="left_columns">
<div class="lpost">-91</div>
<div class="lpost">-99</div>
<div class="lpost">-19</div>
<div class="lpost">-39</div>
</div>
</div>
</div>
</div>
have too many left_columns and right_columns divs
how to fix this?

You should to check if the .right_columns or .left_columns exists or not:
$('.wrapper').each(function() {
var lpost = $(this).find(".lpost"),
rpost = $(this).find(".rpost"),
lcol = $(this).find('.left_columns');
if(lcol.length){
var rcol = $(this).find('.right_columns');
lpost.appendTo(lcol);
rpost.appendTo(rcol);
}else{
lpost.wrapAll('<div class="left_columns"></div>');
rpost.wrapAll('<div class="right_columns"></div>');
}
})

Javascript to get two parents up (no jQuery)

I've got:
<div id='someId'>
<div>
<div onclick='someFunction(event)'>
Text
</div>
</div>
</div>
someFunction(event){
var twoParentsUpId = ??????
}
How can I get this "someId" with the other two DIVs not having any IDs?
... not using jQuery.

This will do it for you https://jsfiddle.net/DIRTY_SMITH/jaer6zzd/
<div id='someId'>
<div>
<div onclick='someFunction(event)'>
Text
</div>
</div>
</div>
<script>
function someFunction(event){
var twoParentsUpId = event.target.parentElement.parentElement;
twoParentsUpId.style.backgroundColor = "red";
}
</script>

Develop Reference

JavaScript is the programming language of the Web.

Delete duplicate Item in Each function - javascript

Related

How to hide a div if another has no content

checking if element's text is same as another element's text

How to change last position in toggleClass

why the wrapAll in infinite-scroll, have many divs?

Javascript to get two parents up (no jQuery)

Categories

Resources