CODEWITHSUNDEEP
jqueryhtml
user10013994
user10013994

Reputation:

how can i get particular div text from selected li

I have created multiple ul and I want particular div value from particular li

I have tried to make a function for that but it is not working

$(".answer-list li").click(function() {
	$(this).addClass('active');
	BusinessLogic();
});

function BusinessLogic(){
   var selText = $('.answer-list li .active div p').text();
   alert(selText);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<ul class="answer-list" id="answer_list1">
		<li>
			<a tabindex="1" id="question1">
				<span class="letter-option">A.</span>
				<div>
					<p>Plan risk management</p>
				</div>
			</a>
		</li>
		<li class="active">
			<a tabindex="2" id="question1">
				<span class="letter-option">B.</span>
				<div>
					<p>Identify risks</p>
				</div>
			</a>
		</li>
		<li>
			<a tabindex="3" id="question1">
				<span class="letter-option">C.</span>
				<div>
					<p>Plan risk responses</p>
				</div>
			</a>
		
		</li><li>
			<a tabindex="4" id="question1">
				<span class="letter-option">D.</span>
				<div>
					<p>Perform qualitative risk analysis</p>
				</div>
			</a>
		</li>
</ul>

and I want selected li div value but it shows me blank

can anybody help me with this?

Upvotes: 1

Views: 38

Answers (2)

Syed mohamed aladeen
Syed mohamed aladeen

Reputation: 6755

Try like this to get the innerhtml of div tag.

$(".answer-list li").click(function() {
	$('li').removeClass('active');
  $(this).addClass('active');
	BusinessLogic();
});

function BusinessLogic(){
   var selText = $('.answer-list li.active div p').text();
   console.log(selText);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<ul class="answer-list" id="answer_list1">
        <li>
            <a tabindex="1" id="question1">
                <span class="letter-option">A.</span>
                <div>
                    <p>Plan risk management</p>
                </div>
            </a>
        </li>
        <li class="active">
            <a tabindex="2" id="question1">
                <span class="letter-option">B.</span>
                <div>
                    <p>Identify risks</p>
                </div>
            </a>
        </li>
        <li>
            <a tabindex="3" id="question1">
                <span class="letter-option">C.</span>
                <div>
                    <p>Plan risk responses</p>
                </div>
            </a>

        </li><li>
            <a tabindex="4" id="question1">
                <span class="letter-option">D.</span>
                <div>
                    <p>Perform qualitative risk analysis</p>
                </div>
            </a>
        </li>
</ul>

Upvotes: 0

Lalji Tadhani
Lalji Tadhani

Reputation: 14149

Remove active Class on li click event & remove space .answer-list li.active

$(".answer-list li").click(function() {
      $('.answer-list li').removeClass('active');
        $(this).addClass('active');
        BusinessLogic();
    });

    function BusinessLogic(){
       var selText = $('.answer-list li.active div p').text();
       alert(selText);
    }


$(".answer-list li").click(function() {
  $('.answer-list li').removeClass('active');
	$(this).addClass('active');
	BusinessLogic();
});

function BusinessLogic(){
   var selText = $('.answer-list li.active div p').text();
   alert(selText);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<ul class="answer-list" id="answer_list1">
		<li>
			<a tabindex="1" id="question1">
				<span class="letter-option">A.</span>
				<div>
					<p>Plan risk management</p>
				</div>
			</a>
		</li>
		<li class="active">
			<a tabindex="2" id="question1">
				<span class="letter-option">B.</span>
				<div>
					<p>Identify risks</p>
				</div>
			</a>
		</li>
		<li>
			<a tabindex="3" id="question1">
				<span class="letter-option">C.</span>
				<div>
					<p>Plan risk responses</p>
				</div>
			</a>
		
		</li><li>
			<a tabindex="4" id="question1">
				<span class="letter-option">D.</span>
				<div>
					<p>Perform qualitative risk analysis</p>
				</div>
			</a>
		</li>
</ul>

Upvotes: 1

Related Questions