使用按钮排序

有多种方法可以解决您的问题。一种可能是：

1. 获取div中所有元素的列表。为此，您应该给div一个id，然后使用"document.getElementById（"yourDIVid"）.childNodes"获取其中的元素。

2. 循环浏览这些元素。对于每个元素，查看其文本属性是否以您单击的字母开头。

3. 1. 为了实现这一点，您首先需要获得您点击的按钮。您可以将事件侦听器附加到元素：其中之一是onclick事件。您应该执行一些函数，显示以按钮字母开头的所有元素
4. 2. 检查元素的第一个字母是否为按钮的那个字母。如果是，请使其可见。否则，让它隐形。（element.style.display="none"|"block"）

5. 就是这样！

6. 这里有一些伪代码：

   <script>
   function showElementsStartingWith(containerId, letter){
       document.getElementById(containerId).childNodes.forEach(function(value){
           value.style.display = value.text.startsWith(letter)?"block":"none";
       });
   }
   </script>
   <!-- Modify your buttons -->
   <input type="button" class="btn" value="A"     onclick="showElementsStartingWith('myDIV', 'A')">
   

这是一个原始但有效的例子。希望能有所帮助。

这里是一个仅限javascript的解决方案。

var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
  inputs[i].onclick = function() {
    var letter = this.value[0];
    var paras = document.getElementsByTagName("p");
    for (var j = 0; j < paras.length; j++) {
      if (paras[j].innerHTML.toUpperCase()[0] != letter.toUpperCase()) {
        paras[j].style.display = "none";
      } else {
        paras[j].style.display = "inherit";
      }
    }
  };
}

<div>
  <input type="button" class="btn" value="A">
  <input type="button" class="btn" value="B">
  <input type="button" class="btn" value="C">
  <input type="button" class="btn" value="D">
  <input type="button" class="btn" value="E">
  <input type="button" class="btn" value="F">
  <input type="button" class="btn" value="G">
</div>
<div>
  <p>aas</p>
  <p>bas</p>
  <p>cas</p>
  <p>das</p>
  <p>eas</p>
  <p>fas</p>
  <p>gas</p>
</div>

<div>
  <input type="button" class="btn" value="A" onclick="searchval(this)">
  <input type="button" class="btn" value="B" onclick="searchval(this)">
  <input type="button" class="btn" value="C" onclick="searchval(this)">
  <input type="button" class="btn" value="D" onclick="searchval(this)">
  <input type="button" class="btn" value="E" onclick="searchval(this)">
  <input type="button" class="btn" value="F" onclick="searchval(this)">
  <input type="button" class="btn" value="G" onclick="searchval(this)">
</div>
<div id="words">
<p>aas</p>
<p>bas</p>
<p>cas</p>
<p>das</p>
<p>eas</p>
<p>fas</p>
<p>gas</p>
</div>
<script type="text/javascript">
function searchval(n)
{
    var s = n.value;
    var wordsele = document.getElementById("words");
    var words = wordsele.getElementsByTagName("p");
    var re = new RegExp("^" + s, "i");
    for (var i = 0, ele; ele = words[i]; i++)
    {
        var myword = ele.innerHTML;
        words[i].style.display = (!myword.match(re)) ? "none" : "block";
    }
}
</script>

编辑： 已更新，以便段落折叠，而不是停留在原来的位置

这是一个有效的javascript解决方案。为每个按钮提供onclick事件侦听器。单击时执行clicked( element )功能。此函数隐藏div中的所有元素，为它们提供具有display:none规则的noDisplay类。然后我们检查段落的第一个字母是否与按钮的值匹配。如果找到匹配项，则该段落可见。希望这能有所帮助！

function clicked( element ){
  var everyChild = document.querySelectorAll( '#wrapper p' );
  for( var i = 0; i < everyChild.length; i++ ){
    everyChild[ i ].classList.add( 'noDisplay' );
  } 
  
  for( var i = 0; i < everyChild.length; i++ ){
    if( element.value == everyChild[ i ].innerHTML.slice( 0, 1 ) ){
      everyChild[ i ].classList.remove( 'noDisplay' )
    }
  }
}

input{
  text-transform:uppercase;
 }
.noDisplay{ display:none; }

<div>
  <input type="button" class="btn" value="a" onclick="clicked( this )">
  <input type="button" class="btn" value="b" onclick="clicked( this )">
  <input type="button" class="btn" value="c" onclick="clicked( this )">
  <input type="button" class="btn" value="d" onclick="clicked( this )">
  <input type="button" class="btn" value="e" onclick="clicked( this )">
  <input type="button" class="btn" value="f" onclick="clicked( this )">
  <input type="button" class="btn" value="g" onclick="clicked( this )">
</div>
<div id="wrapper">
<p id ="aas">aas</p>
<p id="bas">bas</p>
<p id="cas">cas</p>
<p id="das">das</p>
<p id="eas">eas</p>
<p id="fas">fas</p>
<p id="gas">gas</p>
</div>

试试这样的方法。。

$('.btn').click(function(a) {
  var filt = this.value.toLowerCase();
  $('div p').hide();
  $("div p").each(function() {
    var that = $(this);
    var text = that.text();
    if (text.startsWith(filt))
      that.show();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div>
  <input type="button" class="btn" value="A">
  <input type="button" class="btn" value="B">
  <input type="button" class="btn" value="C">
  <input type="button" class="btn" value="D">
  <input type="button" class="btn" value="E">
  <input type="button" class="btn" value="F">
  <input type="button" class="btn" value="G">
</div>
<div>
  <p>aas</p>
  <p>bas</p>
  <p>bass</p>
  <p>cas</p>
  <p>cass</p>
  <p>das</p>
  <p>eas</p>
  <p>fas</p>
  <p>gas</p>
</div>