jQuery/Bootstrap 3 - 点击查找上一个兄弟姐妹答案

【问题标题】：jQuery/Bootstrap 3 - find previous sibling on clickjQuery/Bootstrap 3 - 点击查找上一个兄弟姐妹
【发布时间】：2016-07-08 22:10:51
【问题描述】：

我正在尝试根据下一个具有“collapse”类或“collapse in”类的<ul>sibling 添加一个跨度。

如果兄弟<ul> 有任何类，我已经可以将我需要的跨度放在前面的<a> 中。但是现在我需要在点击<a> 展开<ul> 时更改跨度。

为了更好地理解这里有一个 jsfiddle：https://jsfiddle.net/qtrhu249/2/

HTML：

<div class="treeview">
<ul class="level1">
  <li>
    <a data-toggle="collapse" href=".options1">
      Item 1
    </a>
    <ul class="collapse options1">
      <li>
        <a data-toggle="collapse" href=".sublevel1"></a>
        <input type="checkbox" value="option1" />
        <a data-toggle="collapse" href=".sublevel1">Item 1-1</a>
        <ul class="collapse sublevel1">
          <li>
              Item 1-1-1
            <ul>
              <li><input type="checkbox" value="option1" />
                Item 1-1-1-1
              </li>
              <li><a data-toggle="collapse" href=".collapse1-1-1-1-1"></a>
              <input type="checkbox" value="option1" />
                <a data-toggle="collapse" href=".collapse1-1-1-1-1">Item 1-1-1-2</a>
                <ul class="collapse collapse1-1-1-1-1">
                  <li>Item 1-1-1-2-1
                    <ul>
                      <li><input type="checkbox" value="option1" />Item 1-1-1-2-1-1</li>
                      <li><a data-toggle="collapse" href=".collapse1-1-1-1-1-1-1"></a><input type="checkbox" value="option1" />
                        <a data-toggle="collapse" href=".collapse1-1-1-1-1-1-1">Item 1-1-1-2-1-2</a>
                        <ul class="collapse collapse1-1-1-1-1-1-1">
                          <li>Item 1-1-1-2-1-2-1
                            <ul>
                              <li><input type="checkbox" value="option1" />Item 1-1-1-2-1-2-1-1</li>
                              <li><input type="checkbox" value="option1" />Item 1-1-1-2-1-2-1-2</li>
                              <li><input type="checkbox" value="option1" />Item 1-1-1-2-1-2-1-3</li>
                              <li><input type="checkbox" value="option1" />Item 1-1-1-2-1-2-1-4</li>
                            </ul>
                          </li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li><input type="checkbox" value="option1" />Item 1-2</li>
      <li><input type="checkbox" value="option1" />Item 1-3</li>
      <li><input type="checkbox" value="option1" />Item 1-4</li>
    </ul>
  </li>
</ul>

</div>

查询：

$('.treeview ul').not('ul:not([class])').each(function() {
    $(this).find("a").first().prepend("<span>XYZ</span>");
})

目标：单击时具有XYZ 的元素，将更改为ZYX 并向后更改。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

您可以使用 html() 更改跨度的文本。试试这个：

//Function on click a elements with data-toggle
$('a[data-toggle]').on('click',function(){

     //Target the span inside the clicked a
     var sp = $('span',this)

     //Toggle the Text 
     sp.html() == "XYZ" ? sp.html('ZYX') : sp.html('XYZ');
 })

Updated Fiddle

【讨论】：

【解决方案2】：

我不知道我是否完全理解您的问题，但我对您的JavaScript 代码进行了一些更改。见下文：

$('.treeview ul').not('ul:not([class])').each(function() {
  $(this).find("a").first().prepend("<span>XYZ</span>");
});
$('a[data-toggle]').on('click',function(){
  var sp = $('span', this);
  if (!sp[0])
    sp = $('span', $(this).prevAll('a'));
  sp.html() == "XYZ" ? sp.html('ZYX') : sp.html('XYZ');
});

【讨论】：