JSFiddle - React, Tailwind, and code Playground

by Artem

HTML

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<ul class="my-list">
  <li class="first">item1</li>
  <li class="second" data-name="second">item2</li>
  <li>item3
    <ul>
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
    </ul>
  </li>
  <li><span>item4</span></li>
  <li>item5</li>
</ul>
<input type="text" name="name" id="name" value="John">
<br>
<button id="toggle">Нажать</button>
<div id="box">
  <h1>Content</h1>
</div>
<output></output>

CSS

#box {
  text-transform: uppercase;
  font-family: monospace;
  text-align: center;
  padding: 10px 20px;
  border: 1px solid #000;
}

JavaScript

$(function(){
	var out = $('output');
	var lis = $('ul').children('li');
	var filterLi = lis.not(':has(span)').filter(':contains(item1)');
  var parLi = $('li').filter('.first').parents();
  
  $('li').eq(0).siblings().css('color', 'red' ).andSelf().eq(0).css('color', 'green');
  $('li').eq(1).attr('data-name', function(index, value){
  	//console.log(index, value);
  });
  $('input[type="text"]').each(function(index, element){
  	console.log(index, $(this).val());
  });
  
});

(function(){
	var button = document.getElementsByTagName('button')[0];
  var box = document.getElementById('box');
  
  button.addEventListener('click', function(){
  	box.style.display = 'none';
    console.log('sds');
  });
  
  box.addEventListener('click', function(){
  	button.click();
  });
  
})();