Javascript/jquery compare the text of a div and a li element in a separate div

Question

I have a sidebar that populates a ul based via the h3 contents of a clicked div element in the main content of the page.
This (below) is the jQuery I am using to attempt to only show each title once.
The first element clicked on will not be repeated in the sidebar with multiple clicks, but every other clicked div will repeat in the sidebar, including the first div > h3 if another div was clicked first.
console.log shows that title prints out the clicked item but sidebarinsutry only prints out the text of the first li added to the ul.
I want to be remove an li from the ul if the content matches the content of the div >h3 being clicked on. In other words, remove duplicates from the sidebar as they happen.

$(".industries").on('click', function(){
    var title = $(this).find('h3').html();
    var sidebarindustry = $('.widget-Text_Widget ul').find('.indhandle').find('.sidebar-title').html();



        ////****!!!!wont work bc they are both type object and reference different objects*****/
        var indIteminList = title !== sidebarindustry;


        $('.widget-Text_Widget').find('ul').append(indIteminList ? '<li class="indhandle labelsidebar"><span class="sidebar-title">'+ title +'</span> <span class="sidebar-item-remove">x</span></li>') : '';

Showing some of the markup or making a fiddle would be extremely helpful. — wrxsti, Jul 20 '15 at 18:43
What do you mean they are both objects, they look like strings to me ? — adeneo, Jul 20 '15 at 18:44
if either of those collections has more than one element the text won't match as it will be text from all elements in collection. Need html. — charlietfl, Jul 20 '15 at 18:52
[**What is console.log**](http://stackoverflow.com/questions/4539253/what-is-console-log) — adeneo, Jul 20 '15 at 18:53
this should give you some idea of what I'm working with: https://jsfiddle.net/andrit/tzjnLzr2/2/ — ardev, Jul 20 '15 at 19:08
@adeneo yup console.log lists out all (12) div > h3 in a string. What I meant about them being both objects: (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Using_the_Equality_Operators) — ardev, Jul 20 '15 at 19:16
@charlietfl It seems sidebarindustry is not refreshing or changing when i use .html() for it--the value is always the first div >h3 I clicked. If I use .text(), each of the h3's string together within this (sidebarindustry) variable. — ardev, Jul 20 '15 at 19:24

score 0 · Accepted Answer · answered Jul 20 '15 at 18:50

You could loop through the values you already have in your sidebar (kind of confused on the question) but have each element you want to be added call a function i.e.

$(elementIwantToBeAbleToMove).on('click',function(){
  AddToList($(this).text());
});
function AddToList(name){ var addItem = true; 
$(elementsIWantToCheckAgainst).each(function(){ 
   if($(this).text() == name)
   addItem = false;
}); 
if(addItem)
 $(elementIwantToAppend).append('<li>' + name + '</li>') //or div or whatever it is
};

score 0 · Answer 2 · answered Jul 20 '15 at 18:55

0

It's not quite clear what your desired functionality is as you haven't provided a clear example, however I have created a JSFiddle demonstrating what I think you would like your code to do.

One thing to note is that you have a typo on your last line. Your call to append ends prematurely, cutting of the false branch. Look at the last few characters of these and notice a difference:

// incorrect
$('.widget-Text_Widget').find('ul').append(indIteminList ? '<li class="indhandle labelsidebar"><span class="sidebar-title">'+ title +'</span> <span class="sidebar-item-remove">x</span></li>') : '';

// correct
$('.widget-Text_Widget').find('ul').append(indIteminList ? '<li class="indhandle labelsidebar"><span class="sidebar-title">'+ title +'</span> <span class="sidebar-item-remove">x</span></li>' : '');

answered Jul 20 '15 at 18:55

sdgluck

24,894
8
75
90

yeah, copied and pasted that over quickly to switch the order in the ternary operator based on something I was trying in my editor. Sorry for the sloppy question--working on a few things at once--thanks for giving it a shot, Ill take a look at your fiddle – ardev Jul 20 '15 at 19:33
its hard to explain it here and have to rebuild it here...wish I could just share it but its on a dev server...not to be shared with the world... anyway, in your example, you would have a few more li. the user would clcik on the li, not a separate button and the text within the li would populate the sidebar. this much I have, the problem is that if the user reclicks that same li, it puts a duplicate into the sidebar. I want to remove the sidebar submission if it already exists. – ardev Jul 20 '15 at 19:57

Javascript/jquery compare the text of a div and a li element in a separate div

2 Answers2