CODEWITHSUNDEEP
c#asp.netstringappend
Abbas
Abbas

Reputation: 5044

How can I add "class" attributes to HTML elements?

I have the following HTML. I want to add class="last" attributes to the final li elements in each list. How can I do this? 

<div class="gpbscol">
<ul class="listl">
    <li>ACCESSORIES</li>
    <li>AMPLIFIERS</li>
    <li>ANALOG AUDIO PROCESSING</li>
    <li>MICROPHONE PREAMPLIFIERS</li>
    <li>MICROPHONES</li>
    <li>SPEAKERS/MONITORS</li>
    <li>STUDIO</li>
    <li>DIGITAL AUDIO PROCESSING</li>
    <li>CONSOLES, MIXERS</li>
    <li>DAWS/PERIPHERALS</li>
</ul>
</div>
<div class="audio"> 
   <ul class="listl">
    <li>DAWS/PERIPHERALS</li>
    <li>LOUDSPEAKERS — FOH</li>
    <li>RECORDERS/PLAYERS</li>
    <li>HEADPHONES</li>
    <li>MICROPHONES - WIRELESS CONVERTERS</li>
    <li>NETWORK AUDIO / CONTROL / SNAKES</li>
    <li>COMPUTER AUDIO INTERFACES</li>
    <li>INTERCONNECTS</li>
    <li>LOUDSPEAKERS — STAGE MONITORS</li>
    <li>ACOUSTIC TREATMENT</li>
    <li>MI PRODUCTS</li>
   </ul>
</div>

So the final element might be 

<li class="last">MI PRODUCTS</li>

Upvotes: 0

Views: 1525

Answers (5)

Abbas
Abbas

Reputation: 5044

The easiest of all, this is using HtmlAgilityPack;

TextWriter text = new StringWriter();
string set =  [html here];
HtmlDocument doc = new HtmlDocument();
doc.LoadHtml(set);
HtmlNode node = doc.DocumentNode.SelectSingleNode("//li[last()]");
HtmlAttribute attr;
attr = node.SetAttributeValue("class", "last");
doc.Save(text);
return text;

anyways thanks all for helping me.

Upvotes: 0

James Johnson
James Johnson

Reputation: 46047

This would be easier to do with jQuery:

$(function(){
    $("ul.listl li:last").addClass("last");
});

And that's all, folks :)

Upvotes: 1

Royi Namir
Royi Namir

Reputation: 148534

string[] g=@"<div class=""gpbscol"">
<ul class=""listl"">
    <li>ACCESSORIES</li>
    <li>AMPLIFIERS</li>
    <li>ANALOG AUDIO PROCESSING</li>
    <li>MICROPHONE PREAMPLIFIERS</li>
    <li>MICROPHONES</li>
    <li>SPEAKERS/MONITORS</li>
    <li>STUDIO</li>
    <li>DIGITAL AUDIO PROCESSING</li>
    <li>CONSOLES, MIXERS</li>
    <li>DAWS/PERIPHERALS</li>
</ul>
</div>
<div class=""audio""> 
   <ul class=""listl"">
    <li>DAWS/PERIPHERALS</li>
    <li>LOUDSPEAKERS — FOH</li>
    <li>RECORDERS/PLAYERS</li>
    <li>HEADPHONES</li>
    <li>MICROPHONES - WIRELESS CONVERTERS</li>
    <li>NETWORK AUDIO / CONTROL / SNAKES</li>
    <li>COMPUTER AUDIO INTERFACES</li>
    <li>INTERCONNECTS</li>
    <li>LOUDSPEAKERS — STAGE MONITORS</li>
    <li>ACOUSTIC TREATMENT</li>
    <li>MI PRODUCTS</li>
   </ul>
</div>".Split(new string[]{"<li>"});

g[g.length-1]=g[g.length-1].replace("<li>","<li class='last' >");

string newString=String.Join("", g);

Upvotes: 0

Abdul Munim
Abdul Munim

Reputation: 19217

I would be a styling issue. If I had no option for client side codes, I would go for CSS styling. You may consider this:

ul.listl li:last-child { }

Upvotes: 2

Martijn B
Martijn B

Reputation: 4075

I agree with @JohnHartsock but if you want to do it your way you can use a variety of libraries which help you in querying html elements (DOM).

  1. Fizzler
  2. Sharp-Query
  3. HTML Agility Pack

Upvotes: 0

Related Questions