Question

我的代码（标记已更改！TNX）：

<div class="categories">
  <div class="category">
    <a>category 1</a>
  </div>
  <ul class="subcategories">
    <li class="subcategory">
      <a>subcategory 1</a>
    </li>
    <li class="subcategory">
      <a>subcategory 2</a>
    </li>
  </ul>
  <div class="category">
    <a>category 2</a>
  </div>
  <ul class="subcategories">
    <li class="subcategory">
      <a>subcategory 3</a>
    </li>
    <li class="subcategory">
      <a>subcategory 4</a>
    </li>
    <li class="subcategory">
      <a>subcategory 5</a>
    </li>
  </ul>
</div>

我想在用户点击子类别时获取该类别的文本。例如：点击“子类别2”给我文本“类别1”

Answer 1

我建议改变HTML，然后使用jquery代码：

<ul>
   <li class="category"><a>category 1</a></li>
   <li class="subcat">
       <ul>
           <li class="subcategory"><a>subcategory 1</a></li>
           <li class="subcategory"><a>subcategory 2</a></li>
       </ul>
   </li>
   <li class="category"><a>category 2</a></li>
   <li class="subcat">
     <ul>
        <li class="subcategory"><a>subcategory 3</a></li>
        <li class="subcategory"><a>subcategory 4</a></li>
     </ul>
  </li>
</ul>

Jquery代码 -

$("li.subcategory").click(function(){
   console.log($(this).parents('.subcat').prev().find('a').text());
});

jsfiddle - https://jsfiddle.net/dhananjaymane11/j80hxhuw/1/

Answer 2

我的建议是首先修复HTML标记：

<ul>
   <li class="category"><a>CATEGORY A</a>
       <ul>
           <li class="subcategory">SUBCATEGORY A1</li>
           <li class="subcategory">SUBCATEGORY A2</li>
       </ul>
   </li>
   <li class="category"><a>CATEGORY B</a>
      <ul>
        <li class="subcategory">SUBCATEGORY B1</li>
        <li class="subcategory">SUBCATEGORY B2</li>
     </ul>
  </li>
</ul>

然后使用以下代码片段：

$(document).ready(function() {
    $("li.subcategory").click(function(){
        alert($(this).parent().prev().text());
    });
});

警报功能只是为了显示正确的结果，根据您的需要进行更改。这里还有一个jsfiddle的演示链接： https://jsfiddle.net/y34adrhb/

Answer 3

enter code here $("li").on("click",function(){
                    $(this).parent("ul").parent("ul").find("li").html();
                });
enter code here <ul>
                   <li></li>
                   <ul>
                      <li></li>
                      <li></li>
                   </ul>
                 </ul>
                <ul>
                   <li></li>
                   <ul>
                      <li></li>
                      <li></li>
                      <li></li>
                   </ul>
                 </ul>

你必须用这种方法改变你的标记。

Answer 4

$(document).on('click', '.subcategory', function(e){
	e.preventDefault;
  var text = $(this).parents('ul').first().prev().find('a').html();
  alert(text);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class="categories">
  <li class="category">
    <a>category 1</a>
  </li>
  <ul class="subcategories">
    <li class="subcategory">
      <a>subcategory 1</a>
    </li>
    <li class="subcategory">
      <a>subcategory 2</a>
    </li>
  </ul> <!-- tag should be closed here -->
  <li class="category">
    <a>category 2</a>
  </li>
  <ul class="subcategories">
    <li class="subcategory">
      <a>subcategory 3</a>
    </li>
    <li class="subcategory">
      <a>subcategory 4</a>
    </li>
    <li class="subcategory">
      <a>subcategory 5</a>
    </li>
  </ul>
</ul>

Jquery在ul外面选择li？

4 个答案: