-1

I have the following html structure:

<ul class="list-inline recommended-logo">
    <li><i id="icon-changer" class="First class"></i><span>First class</span></li>
    <li><i id="icon-changer" class="Second class"></i><span>Second class</span></li>
    <li><i id="icon-changer" class="Third, class"></i><span>Third, class</span</li>
    <li><i id="icon-changer" class="Four class"></i><span>Four class</span></li>
</ul>

How I can check with jQuery if any of this classes exist and if exist then replace with different text classes. In the same page can be more than 3 classes.

I try to create something like this but is work only for first class:

if (jQuery("#icon-changer").hasClass("First class")) {
    jQuery('#icon-changer').removeClass(First class').addClass('icon-first');
}
if (jQuery("#icon-changer").hasClass("Second class")) {
    jQuery('#icon-changer').removeClass('Second class').addClass('icon-second');
}

here is how my html is generated:

   foreach($targetValues as $_target) :?>
     <ul class="list-inline recommended-logo">

     <li><i id="icon-changer" class="<?php echo $_target ?>"></i><span><?php echo $_target ?></span></li>
     </ul>
    <?php endforeach;
Robert
  • 812
  • 3
  • 18
  • 47
  • Find `$( ".class" ).length` – u_mulder Mar 22 '17 at 19:33
  • 1
    Why are you reusing IDs? Why aren’t you using common classes for all `` elements? What have you tried? You have already named both steps: “check if element has a class”, “replace elements’ classes” (or so). Where exactly are you stuck in accomplishing these two steps? – Sebastian Simon Mar 22 '17 at 19:34
  • 1
    [ID's Must Be Unique](http://stackoverflow.com/questions/5611963/can-multiple-different-html-elements-have-the-same-id-if-theyre-different-eleme), specifically because it will cause problems in [JavaScript](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) and CSS when you try to interact with those elements. – Jay Blanchard Mar 22 '17 at 19:35
  • You can use `.hasClass()` – Jay Blanchard Mar 22 '17 at 19:35
  • replace to what? In you example you have 4 different classes. Should these be changed to something else? – KornholioBeavis Mar 22 '17 at 19:36
  • 1
    You have previous questions where your code selects by class and also changes text content, so what's the problem here? –  Mar 22 '17 at 19:37
  • yes for example for the First class I need to be replaced with icon-one, Second class with icon-two – Robert Mar 22 '17 at 19:37
  • I edit my question and I add what I try – Robert Mar 22 '17 at 19:44
  • all that classes that are initial in the html are generated automatically, for that I want to use something like find and search, so I can't change anything in the intial html – Robert Mar 22 '17 at 19:45
  • first of all according to html specification, you cant use the same ID twice. Your HTML structure is broken, fix it, then your jquery should work well – ArtemSky Mar 22 '17 at 20:32
  • we can remove the ID, I just put the ID there just to be much easy to call. so what is the solution? why the html is broken? – Robert Mar 22 '17 at 20:40

2 Answers2

1

UPDATE:: You could try something equivelant:

<ul class="list-inline recommended-logo">
    <li><i id="icon-changer" class="First class"></i><span>First class</span></li>
    <li><i id="icon-changer" class="Second class"></i><span>Second class</span></li>
    <li><i id="icon-changer" class="Third class"></i><span>Third, class</span></li>
    <li><i id="icon-changer" class="Fourth class"></i><span>Four class</span></li>
</ul>

<script>
   var arr = [{class:'First.class',id:'first'},{class:'Second.class',id:'second'},{class:'Third.class',id:'third'},{class:'Fourth.class',id:'fourth'}]
   for(var i=0;i<arr.length;++i){
    $(`.${arr[i].class}`).parent().find('span').text(`${arr[i].id}`)
//Or if what you need is to change the class name to the name of the id
//$(`.${arr[i].class}`).removeClass().toggleClass(`icon-${arr[i].id}`)
   }
</script>
KornholioBeavis
  • 2,402
  • 2
  • 19
  • 26
  • I can't change the classes, the html must remain intact – Robert Mar 22 '17 at 19:53
  • updated, but doesnt make a difference. Should still be what you needed? – KornholioBeavis Mar 22 '17 at 19:55
  • but you here change the id? I need to replace the First class with icon-class1 for example – Robert Mar 22 '17 at 20:00
  • run the code in jsfiddle and you can see the id is changed to represent the class – KornholioBeavis Mar 22 '17 at 20:01
  • I need to change the text inside the class not the ID, only First class with icon-class1 – Robert Mar 22 '17 at 20:06
  • Hi I think is something good, but there are some issues, first I don't need to change the span text, I need to change the class for tag i, so if the span have First class then the i class will be first_class and two if you take a look at the third li there in the span there we have the class with comma: class="Third, class" how we can put this comma in your javascript? – Robert Mar 23 '17 at 09:31
  • I think I solve it, with your code it seems to be perfect – Robert Mar 23 '17 at 11:45
-3

First of all, make sure your class names do NOT have spaces. Spaces in class="a b" actually means 2 separate classes, a and b, not a class "a b". Also as others have mentioned, IDs should be unique. So with code:

<ul class="list-inline recommended-logo">
    <li><i id="icon-changer-1" class="first_class"></i><span>First class</span></li>
    <li><i id="icon-changer-2" class="second_class"></i><span>Second class</span></li>
    <li><i id="icon-changer-3" class="third_class"></i><span>Third, class</span</li>
   <li><i id="icon-changer-4" class="fourth_class"></i><span>Four class</span></li>
</ul>

You can select by class (with a .) and replace easily:

$('.first_class').removeClass('first_class').addClass('fifth_class')

will take everything with the class "first_class" and replace it with "fifth_class".

I stand by my original code as listed above. But looking at the edits to the question, the problem is apparently using jQuery to select on ID when IDs are repeated - the first So ignore the IDs and select based on the classes - that is, use $('.First') $('.Second') etc. for each of the removeClass/addClass function calls. $('#...') simply won't work as expected if IDs are not unique.

manassehkatz-Moving 2 Codidact
  • 2,906
  • 2
  • 15
  • 25