jQuery - show elements that has same class

user_12963227 0
Viewed 220

I have two ul list tags that contain inputs with the same classes.

What I want to do is show the element that has the same class as the input I'm typing on the keyboard and hide if current input with same class is empty.

Example: If I want to write to the input with class "test1" I want the element with class "test1" from the other list to be shown:

<ul id="contTestA">
    <li><input type="text" class="test1" /></li>
    <li><input type="text" class="test2" /></li>
    <li><input type="text" class="test3" /></li>
</ul>

<ul id="contTestB">
    <li class="test1" style="display:none;"><input type="text"  /></li>
    <li class="test2" style="display:none;"><input type="text"  /></li>
    <li class="test3" style="display:none;"><input type="text"  /></li>
</ul>

Thanks for any help

class html jquery javascript
3 Answers

You can get the current element's class on input event using .attr() and show the element with the current class:

$('#contTestA > li > input').on('input', function(){
  var curCls = $(this).attr('class');
  $(`#contTestB > li.${curCls}`).show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="contTestA">
<li><input type="text" class="test1"/></li>
<li><input type="text" class="test2"/></li>
<li><input type="text" class="test3"/></li>
</ul>

<ul id="contTestB">
<li class="test1" style="display:none;"><input type="text" /></li>
<li class="test2" style="display:none;"><input type="text" /></li>
<li class="test3" style="display:none;"><input type="text" /></li>
</ul>

user_74613810

This is a simple solution that relies on some assumptions:

  • The input has only one class (if more, you can think about a custom attribute)
  • Also the li has only one class (same remark)

$("#contTestA input").on("change", function(){
  $("#contTestB li").css("display", "none");
  $("li."+$(this).attr("class")).css("display", "block");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="contTestA">
  <li><input type="text" class="test1"/></li>
  <li><input type="text" class="test2"/></li>
  <li><input type="text" class="test3"/></li>
</ul>

<ul id="contTestB">
  <li class="test1" style="display:none;"><input type="text" /></li>
  <li class="test2" style="display:none;"><input type="text" /></li>
  <li class="test3" style="display:none;"><input type="text" /></li>
</ul>

user_118294080

The solution is:

  1. Get the class of the active input
  2. Hide all the elements in #contTestB
  3. Show only the item to matches the same class

$("input[type=text]").on("input", function() {
  var currentInput = $(this);
  $("#contTestB li").css("display", "none");
  if (currentInput.val().length > 0) {
    var currentClass = currentInput.attr("class").trim();
    $("." + currentClass).css("display", "block")
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul id="contTestA">
    <li><input type="text" class="test1" /></li>
    <li><input type="text" class="test2" /></li>
    <li><input type="text" class="test3" /></li>
</ul>

<ol id="contTestB">
    <li class="test1" style="display:none;">1<input type="text" /></li>
    <li class="test2" style="display:none;">2<input type="text" /></li>
    <li class="test3" style="display:none;">3<input type="text"/></li>
</ol>

Using this approach you are fetching the current class name using the attr('class') function which returns all the classes using in the li my suggestion is using another attribute name as follows:

<li><input type="text" data-target="test3" class="test3" /></li>

this way you are going to fetch only the attribute data-target using the attr() function and the syntax will be attr('data-target')

user_42640900
Related