別のスパン内でスパンテキストを変更するにはどうすればよいですか？

Question

私はリストが折りたたまれているか、展開されているかによって、 '+'から ' - 'に変わる折り畳み可能なリストを作ろうとしています。私はこの文を使用してテキストを取得することができます

$(this).children().eq(i).children('span')[0].firstChild.outerText; 

しかし、私は値を変更する方法を見つけ出すことはできません。おそらく、JQuery Guruが私に見せてくれるより洗練されたソリューションがあります。ここに私のJSFiddleがあります。

This answer私は私の質問に見つけることができますが、私はそれを実装する方法がわからない、またはより良い方法がある場合でも。

Answer 1

// Make your code clean and readable! 
 
// Don't target #test. Go directly for your "title/heading" elements ("buttons") 
 
$(".Collapsable").on("click", function() { 
 

 
    // Who is my +/- icon element? 
 
    var $ico = $(this).find(".symbol"); 
 
    // Traverse up to LI and than back down to find my UL sub list: 
 
    var $subList = $(this).closest("li").find("> ul"); 
 
    // Realize the current collapsed/expanded state 
 
    var isSubListHidden = $subList.is(":hidden"); 
 

 
    // OK, time to rock! 
 
    // Change teh text +/- 
 
    $ico.text(isSubListHidden ? "-" : "+"); 
 
    
 
    // Toggle sub lists: 
 
    $subList.stop().slideToggle(); 
 

 
});

.hideUnorderedList { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <ul id="test"> 
 
    <li id="first"> 
 
     <span class="Collapsable"><span class="symbol">+</span>First One</span> 
 
     <ul id="myfirstlist" class="hideUnorderedList"> 
 
     <li>Something to do</li> 
 
     <li>Something else to do</li> 
 
     </ul> 
 
    </li> 
 
    <li id="second"> 
 
     <span class="Collapsable"><span class="symbol">+</span>Second One</span> 
 
     <ul id="mysecondlist" class="hideUnorderedList"> 
 
     <li>Second thing to do</li> 
 
     <li>Second other thing to do</li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 2

これはかなり単純化することができます。むしろインデックスと一致するようにしようとするよりも、単に子孫をターゲットにするjQueryのfind()メソッドを使用して：あなたは、クラスのコンボと擬似要素を `使用することができます

$('#test > li').click(function() { 
 
    var $symbol = $(this).find('.symbol'); 
 
    $(this).find('ul').slideToggle('fast'); 
 
    if ($symbol.text() === ' +') { 
 
    $symbol.text(' -'); 
 
    } else { 
 
    $symbol.text(' +'); 
 
    } 
 
});

.hideUnorderedList { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <ul id="test"> 
 
    <li id="first"> 
 
     <span class="Collapsable"><span class="symbol"> +</span>First One</span> 
 
     <ul id="myfirstlist" class="hideUnorderedList"> 
 
     <li>Something to do</li> 
 
     <li>Something else to do</li> 
 
     </ul> 
 
    </li> 
 
    <li id="second"> 
 
     <span class="Collapsable"><span class="symbol"> +</span>Second One</span> 
 
     <ul id="mysecondlist" class="hideUnorderedList"> 
 
     <li>Second thing to do</li> 
 
     <li>Second other thing to do</li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>